全局組件注冊語法

components中的兩個參數組件名稱和組件內容

Vue.component(組件名稱, { data: 組件數據, template:組件模板內容 })全局組件注冊應用

組件創建：

Vue.component(’button-counter’, { data: function(){ return { count: 0 } }, template: ’<button @click='handle'>點擊了{{count}}次</button>’, methods: { handle: function(){ this.count ++; } } }) var vm = new Vue({ el: ’#app’, data: { } });

如何在頁面中運用，直接在頁面中應用組件名稱

<div id='app'> <button-counter></button-counter></div>

這個組件是可以重用的，直接在頁面中多次使用，切數據相互獨立，互不干擾

組件注冊注意事項

1.data必須是一個函數

分析函數與普通對象的對比

2.組件模板內容必須是單個根元素

分析演示實際的效果

3.組件模板內容可以是模板字符串

模板字符串需要瀏覽器提供支持（ES6語法）

4.組件命名方式

短橫線方式

Vue.component(’my-component’,{/*...*/})

駝峰方式

Vue.component(’MyComponent’,{/*...*/})

如果使用駝峰式命名組件，那么在使用組件的時候，只能在字符串模板中用駝峰的方式使用組件，但是在普通的標簽模板中，必須使用短橫線的方式使用組件

局部組件

局部組件只能在注冊它的父組件中使用

局部組件注冊語法

var ComponentA = {/*...*/}var ComponentB = {/*...*/}var ComponentC = {/*...*/}new Vue({ el : ’#app’, components: {’component-a’ : ComponentA,’component-b’ : ComponentB,’component-c’ : ComponentC}})

組件的創建

Vue.component(’test-com’,{ template: ’<div>Test<hello-world></hello-world></div>’ }); var HelloWorld = { data: function(){ return { msg: ’HelloWorld’ } }, template: ’<div>{{msg}}</div>’ }; var HelloTom = { data: function(){ return { msg: ’HelloTom’ } }, template: ’<div>{{msg}}</div>’ }; var HelloJerry = { data: function(){ return { msg: ’HelloJerry’ } }, template: ’<div>{{msg}}</div>’ }; var vm = new Vue({ el: ’#app’, data: { }, components: { ’hello-world’: HelloWorld, ’hello-tom’: HelloTom, ’hello-jerry’: HelloJerry } });

頁面中的應用

<div id='app'> <hello-world></hello-world> <hello-tom></hello-tom> <hello-jerry></hello-jerry> <test-com></test-com> </div>

以上就是Vue 組件注冊全解析的詳細內容，更多關于Vue 組件注冊的資料請關注好吧啦網其它相關文章！