vue動態註冊元件

2022-06-20 01:51:10 字數 598 閱讀 5255

vue的架構思想,其實就是想按元件化開發,提公升前端的模組復用性,因此在開發過程中,元件的巢狀是很正常的需求。

例如以下需求:

在index.vue頁面想呼叫元件a,a的頁面有兩種樣式,分別為b,和c,想在index.vue呼叫兩個a元件,並且a元件包含有b和c樣式。

那麼在開發的時候,我習慣把b和c的樣式和事件分別封裝為b元件和c元件,如下圖:

這個需求要求我們在index.vue頁面傳遞引數給a元件,然後a元件通過引數決定是呼叫b元件還是c元件,**如下

index.vue:

元件a的:

父類元件a

元件b:

我是a元件下的子元件b

元件c:

我是a元件下的子元件c

補充說明:

也可以使用

生命週期(鉤子):beforemount也可以使用created代替,可以檢視vue的api生命週期

vue註冊元件

下面是建立乙個新的構造器,元件構造器 const hello vue.extend my hello元件註冊,第二個引數傳入的是擴充套件的構造器 vue.component my hello hello my world元件註冊,第二個引數傳入的是選項物件 vue.component my worl...

VUE註冊元件

在註冊乙個元件的時候,我們始終需要給它乙個名字。比如在全域性註冊的時候我們已經看到了 vue.component my component name 該元件名就是 vue.component 的第乙個引數。你給予元件的名字可能依賴於你打算拿它來做什麼。當直接在 dom 中使用乙個元件 而不是在字串模...

vue中全域性註冊元件

1在main.js中全域性註冊公用元件,多個頁面都用到的元件就不用引入多次。import myplugin from components common index.js vue.use myplugin 全域性元件2 在公共元件中需要新建乙個index.js檔案進行註冊處理。import load...