全局組件

定義組件的語(yǔ)法

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

• 在組件的配置對(duì)象中：可以使用 template 屬性指定當(dāng)前組件要渲染的模板結(jié)構(gòu)；

使用組件的語(yǔ)法

• 把 組件的名稱, 以標(biāo)簽的形式，引入到頁(yè)面上就行；

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

其他

可以認(rèn)為：組件是特殊的Vue實(shí)例；

組件和實(shí)例的相同和區(qū)別：

組件中的 data 必須是一個(gè) function 并 return 一個(gè) 字面量對(duì)象；在 Vue 實(shí)例中，實(shí)例的 data 既可以是 對(duì)象，可以是 方法；

組件中，直接通過(guò) template 屬性來(lái)指定組件的UI結(jié)構(gòu)；在 Vue 實(shí)例中，通過(guò) el 屬性來(lái)指定實(shí)例控制的區(qū)域；但是實(shí)例也可以使用 template;

組件和實(shí)例，都有自己的生命周期函數(shù)，私有的過(guò)濾器，methods 處理函數(shù)；

轉(zhuǎn)載于:https://www.cnblogs.com/houfee/p/9953935.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。