Vue元件的使用

元件是可復用的 vue 例項, 如果網頁中的某乙個部分需要在多個場景中使用，那麼我們可以將其抽出為乙個元件進行復用。元件大大提高了**的復用率。

一、全域性註冊

vue.

component
('componentnew'
,)

全域性註冊的元件可以用在任何新建立的 vue 根例項 （new vue）的模板中。

二、區域性註冊

var vm =

newvue(}
,})

區域性註冊的元件在其子元件中不可用。

三、復合元件

vue.

component
('component-fatner',)
vue.
component
('component-son'
,)

vue.

component
('component-fatner',}
,//props:['name'] 陣列形式
props:}}
)

props用於傳遞資料，物件形式的寫法可以給傳參設定限制。

五、檢視元件的屬性

首先通過ref給子元件做乙個標記

在父元件中，通過$refs就可以訪問子元件

在子元件中，通過$parent就可以訪問父元件

vue.

component
('component-fatner',}
})vue.
component
('component-son',}
})

Vue 元件的使用

使用 kebab case vue.component my component name 當使用 kebab case 短橫線分隔命名 定義乙個元件時，你也必須在引用這個自定義元素時使用 kebab case，例如 使用 pascalcase vue.component mycomponentna...

vue 元件及動態元件使用

在註冊乙個元件的時候，我們始終需要給它乙個名字，該元件名就是vue.component的第乙個引數。元件命規則 1 使用 kebab case vue.component my component name 當使用 kebab case 短橫線分隔命名 定義乙個元件時，你也必須在引用這個自定義元素時...

Vue元件使用基礎

這篇博文用來記錄.vue元件的使用方法。可以把元件 按照template style script的拆分方式，放置到對應的.vue檔案中。模板 template 初始資料 data 接受的外部引數 props 方法 methods 生命週期鉤子函式 lifecycle hooks 在html中使用元...