全局組件

定義組件的語法

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

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

使用組件的語法

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

// 導入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實例；

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

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

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

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

轉載于:https://www.cnblogs.com/houfee/p/9953935.html

總結

以上是生活随笔為你收集整理的Vue.js（5）- 全局组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。