Vue 自定義元件

元件(component) 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素，封裝可重用的**。在較高層面上，元件是自定義元素，vue.js 的編譯器為它新增特殊功能。在有些情況下，元件也可以表現為用is 特性進行了擴充套件的原生 html 元素。所有的 vue 元件同時也都是 vue 的例項，所以可接受相同的選項物件 (除了一些根級特有的選項) 並提供相同的生命週期鉤子。

註冊全域性元件：可以使用可以使用vue.component(tagname, options)

1 vue.component('my-component', )

元件在註冊之後，便可以作為自定義元素在乙個例項的模板中使用。注意確保在初始化根例項之前註冊元件：

1 2

3

測試例項：

1 2 311 12 13 1424

25

你不必把每個元件都註冊到全域性。你可以通過某個 vue 例項/元件的例項選項 components註冊僅在其作用域中可用的元件：

1 var child = new vue(})

例子2：

1 2 311 12 13 1428

29

當使用 dom 作為模板時 (例如，使用 el 選項來把 vue 例項掛載到乙個已有內容的元素上)，你會受到 html 本身的一些限制，因為 vue 只有在瀏覽器解析、規範化模板之後才能獲取其內容。尤其要注意，像ul、ol、select、table這樣的元素裡包含的元素有限制，而另一些像option的元素只能出現在某些特定元素的內部，在自定義組建中使用這些受限制的元素，容易導致一些問題。

1 2 ...

3

26 但是用is特殊屬性可以：

1 2 312 13 14 1525

26

或者temp模板標籤也可以：

6 7

811

12 13

或者內聯模板字串也行

6' } } })

data必須是函式構造 vue 例項時傳入的各種選項大多數都可以在元件裡使用。只有乙個例外：data 必須是函式。實際上，如果你這麼做：

1vue.component('my-component', }',  
3   data:   
6 })

1 2 38 9 10 11 12 13 14 1527

28

由於這三個元件例項共享了同乙個 data 物件，因此遞增乙個 counter 會影響所有元件！這就錯了。我們可以通過為每個元件返回全新的資料物件來修復這個問題：

1 data: function () 
5 }

1 2 38 9 10 11 12 13 14 1529

30

Vue 自定義元件

Vue 自定義元件

vue 元件自定義

vue自定義元件

Vue 自定義元件

Vue 自定義元件

vue 元件自定義

vue自定義元件

相關推薦