基于Vue全局組件與局部組件的區別說明
1、組件聲明
<!-- 全局組件模板father模板 --><template id='father'> <div> <h3>這是{{name}}</h1> <div> <p>這是{{data}}</p> </div> </div></template>var FATHER = { template: '#father', data: function() { return { name: '一個全局組件-模板-', data: '數據：18892087118' } } };
2、組件注冊
Vue.component(’father’, FATHER);
3、組件掛載
<h5>全局組件1</h5>
<father></father>
4、組件實例
<!DOCTYPE html><html><head> <title>vue2.0 --- 局部組件與全局組件</title></head> <body> <h3>vue2.0局部組件與全局組件</h3> <div id=’app’> <h5>局部組件</h5> <fatherlocal></fatherlocal> <hr> <h5>全局組件1</h5> <father></father> <hr> <h5>全局組件2</h5> <child :fromfather=’giveData’></child> </div> <!-- 局部組件模板fatherlocal --> <template id='father-local'> <div> <h3>這是{{name}}</h1> <div><p>這是{{data}}</p> </div> </div> </template> <!-- 全局組件模板father --> <template id='father'> <div> <h3>這是{{name}}</h1> <div><p>這是{{data}}</p> </div> </div> </template> <template id='child'> <div> <h3>這是{{name}}</h3> <div><p>{{cmsgtwo}}</p><p>{{cmsg}}</p><p>{{fromfather}}</p><p>{{fromfather.fmsg}}</p><p><input type='button' value='按鈕' @click=' '></p> </div> </div> </template> <script src='http://www.hdgsjgj.cn/bcjs/vue_2.2.2_vue.min.js'></script> <script type='text/javascript'> // 定義組件 var FATHER = { template: '#father', data: function() {return { name: '一個全局組件-模板-', data: '數據：18892087118'} } }; var CHILD = { template: '#child', data: function() {return { name: '子組件', cmsg: '子組件里的第一個數據', cmsgtwo: '子組件里的第二個數據'} }, methods: {change: function() { this.fromfather.fmsg = '子組件數據被更改了'} }, mounted: function() {this.cmsg = this.fromfather; }, props: ['fromfather'], }; // 注冊組件 Vue.component(’father’, FATHER); Vue.component('child', CHILD); var vm = new Vue({ data: {fmsg: 'data里的數據',giveData: { fmsg: '這是父組件里的數據'} }, methods: {}, // 局部組件fatherlocal components: {’fatherlocal’: { template: ’#father-local’, data: function() { return { name: '局部-父組件', data: '局部-父組件里的數據' } }} } }).$mount(’#app’); </script></body></html>
6、特殊的屬性is
當使用 DOM 作為模板時 (例如，將el選項掛載到一個已存在的元素上)，你會受到 HTML 的一些限制，因為 Vue 只有在瀏覽器解析和標準化 HTML 后才能獲取模板內容。尤其像這些元素<ul>，<ol>，<table>，<select>限制了能被它包裹的元素，而一些像<option>這樣的元素只能出現在某些其它元素內部。
自定義組件<my-row>被認為是無效的內容，因此在渲染的時候會導致錯誤。變通的方案是使用特殊的is屬性：
<body> <div id='app1'> <ul><li is='my-component'></li> </ul> </div> <script> Vue.component('my-component',{template:'<h1>{{message}}</h1>',data:function(){ return { message:'hello world' }} }); new Vue({el:'#app1' }) </script> </body>
補充知識：Vue組件之入門：全局組件三種定義
不論我們使用哪種方式創建出來的組件，組件中的template屬性指向的模板內容中，必須有且只有一個根元素，其他元素必須在這個根元素下面。
1.使用Vue.extend配合Vue.component定義全局組件
在使用Vue.extend配合Vue.component定義全局組件時，Vue.extend里面定義template模板，而Vue.component里面是要注冊一個組件。
<body><div id='app'> <!--第三步頁面中使用 --> <!-- 如果要使用組件，直接把組件的名稱以HTML標簽的形式引入到頁面中--> <my-compnent></my-compnent></div><script> //第一步：使用Vue.extend來創建全局組件 var com1 = Vue.extend({ //通過template模板的屬性來展示組件要顯示的html template: ’<h2>使用Vue.extend創建全局組件</h2>’ }); //第二步：使用 Vue.component(’組件名稱’,創建出來的組件模板對象) Vue.component(’myCompnent’, com1); // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: ’#app’, data: {}, methods: {} });</script></body>
【注意】在定義注冊組件時，組件的名稱不需要按照駝峰命名，但是在頁面引入組件時，組件的名稱必須按照駝峰命名。
簡寫如下：
2.直接使用Vue.component定義全局組件
這里是直接使用Vue.component直接創建一個組件
<div id='app'> <my-com2></my-com2></div><script> Vue.component(’myCom2’, { template: ’<h2>直接使用Vue.component創建組件</h2>’ }); // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: ’#app’, data: {}, methods: {} });</script>
3.Vue外部直接定義template
<body><div id='app'> <my-com3></my-com3></div><template id='tmp1'> <div> <h2>這是通過template元素，在外部定義組件的結構，有代碼的提示和高亮</h2> </div></template><script> Vue.component(’myCom3’, { template: '#tmp1' }); var vm = new Vue({ el: ’#app’, data: {}, methods: {} });</script></body>
以上這篇基于Vue全局組件與局部組件的區別說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。
相關文章：
網公網安備