全域性元件三種定義
阿新 • • 發佈：2018-11-09
不論我們使用哪種方式創建出來的元件，元件中的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>
