定義組件
注冊(cè)局部組件
①創(chuàng)建一個(gè)PageTools文件夾并同時(shí)創(chuàng)建一個(gè)index.vue組件文件
②就和我們平時(shí)使用普通組件一樣狞甚,先在使用該組件的文件中導(dǎo)入,在compoents中注冊(cè)祖驱,然后在結(jié)構(gòu)中使用
我們的業(yè)務(wù)組件一般都定義成了局部組件,使用的時(shí)候需要在components中注冊(cè)抡锈,而我們?nèi)滞ㄓ媒M件一般是需要定義為全局組件的府怯,不需要局部注冊(cè)
注冊(cè)全局組件
方法一:
①創(chuàng)建一個(gè)PageTools文件夾并同時(shí)創(chuàng)建一個(gè)index.vue組件文件
②直接在main.js中導(dǎo)入index.vue組件圃阳,給定組件名稱(chēng)以及組件的文件路徑
③通過(guò)? Vue.component (組件名-字符串紊撕,導(dǎo)入時(shí)的組件名)? main.js
以上我們通過(guò)Vue.component全局api實(shí)現(xiàn)了全局注冊(cè)蜡歹,在業(yè)務(wù)組件中就不需要再引入和注冊(cè)了,直接在結(jié)構(gòu)中使用即可薯鳍。
方法二:公共組件(用 Vue.use()的方法注冊(cè)全局組件)
1.關(guān)于Vue.use()
介紹:它是Vue提供的一個(gè)靜態(tài)方法咖气,用來(lái)向Vue注冊(cè)插件(增強(qiáng)Vue的功能)
之前學(xué)習(xí)中用到的場(chǎng)景
格式:Vue.use(obj)
原理:
Vue.use 可以接收一個(gè)對(duì)象,Vue.use(obj)
對(duì)象obj中需要提供一個(gè) install 函數(shù)? 在main.js中
定義全局組件的格式
Vue.component('組件名'挖滤, 組件對(duì)象)
在 Vue.use(obj) 時(shí)崩溪,會(huì)自動(dòng)調(diào)用該 install 函數(shù),并傳入 Vue構(gòu)造器
2.具體操作
①創(chuàng)建一個(gè)PageTools文件夾并同時(shí)創(chuàng)建一個(gè)index.vue組件文件
②創(chuàng)建一個(gè)專(zhuān)門(mén)用來(lái)封裝組件的文件(提供統(tǒng)一注冊(cè)的入口文件 )src/componets/index.js
③在main.js中注冊(cè)插件伶唯,這里插件包含了文件中注冊(cè)的所有組件,不是某一個(gè)