全域性元件

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 處理函式；