Vue.js（5）- 全局組件

全局組件

1. 定義組件的語法

   • Vue.component('組件的名稱', { 組件的配置對象 })

   • 在組件的配置對象中：可以使用 template 屬性指定當前組件要渲染的模板結構；

2. 使用組件的語法

• 把 組件的名稱, 以標簽的形式，引入到頁面上就行；

// 導入vue，掛載組件
import Vue from 'vue/dist/vue.js'
// 使用 Vue.component('字符串組件名稱', { /*組件的配置對象*/ }) 定義全局組件
// 每個組件必須有唯一的根元素進行包裹
Vue.component('my-com1',{template: `<div><div>這是自定義全局組件 my-com1</div><p>這是來搗亂的</p><h1 @click="show">{{msg}}</h1></div>`,// 組件 data 必須是一個function，return一個對象data: function() {return {msg: 'my-com1'}},methods: {show() {console.log('調用了 my-com1 的show方法')}},created() {console.log('執行了組件 中 create生命周期函數');console.log(this.msg);console.log(this.show);},
})

其他

可以認為：組件是特殊的Vue實例；

組件和實例的相同和區別：

1. 組件中的 data 必須是一個 function 并 return 一個 字面量對象；在 Vue 實例中，實例的 data 既可以是 對象，可以是 方法；

2. 組件中，直接通過 template 屬性來指定組件的UI結構；在 Vue 實例中，通過 el 屬性來指定實例控制的區域；但是實例也可以使用 template;

3. 組件和實例，都有自己的生命周期函數，私有的過濾器，methods 處理函數；