Vue 組件注冊全解析
更新時間：2020年12月17日 09:02:30 作者：風(fēng)都散了……
這篇文章主要介紹了Vue 組件注冊全解析的相關(guān)資料，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
全局組件注冊語法
components中的兩個參數(shù)組件名稱和組件內(nèi)容
Vue.component(組件名稱, {
data: 組件數(shù)據(jù),
template:組件模板內(nèi)容
})
全局組件注冊應(yīng)用
組件創(chuàng)建：
Vue.component('button-counter', {
data: function(){
return {
count: 0
}
},
template: '<button @click="handle">點擊了{{count}}次</button>',
methods: {
handle: function(){
this.count ++;
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
});
如何在頁面中運用，直接在頁面中應(yīng)用組件名稱
<div id="app"> <button-counter></button-counter> </div>
這個組件是可以重用的，直接在頁面中多次使用，切數(shù)據(jù)相互獨立，互不干擾
組件注冊注意事項
1.data必須是一個函數(shù)
- 分析函數(shù)與普通對象的對比
2.組件模板內(nèi)容必須是單個根元素
- 分析演示實際的效果
3.組件模板內(nèi)容可以是模板字符串
- 模板字符串需要瀏覽器提供支持（ES6語法）
4.組件命名方式
- 短橫線方式
Vue.component('my-component',{/*...*/})
駝峰方式
Vue.component('MyComponent',{/*...*/})
如果使用駝峰式命名組件，那么在使用組件的時候，只能在字符串模板中用駝峰的方式使用組件，但是在普通的標(biāo)簽?zāi)０逯?，必須使用短橫線的方式使用組件
局部組件
局部組件只能在注冊它的父組件中使用
局部組件注冊語法
var ComponentA = {/*...*/}
var ComponentB = {/*...*/}
var ComponentC = {/*...*/}
new Vue({
el : '#app',
components: {
'component-a' : ComponentA,
'component-b' : ComponentB,
'component-c' : ComponentC
}
})
組件的創(chuàng)建
Vue.component('test-com',{
template: '<div>Test<hello-world></hello-world></div>'
});
var HelloWorld = {
data: function(){
return {
msg: 'HelloWorld'
}
},
template: '<div>{{msg}}</div>'
};
var HelloTom = {
data: function(){
return {
msg: 'HelloTom'
}
},
template: '<div>{{msg}}</div>'
};
var HelloJerry = {
data: function(){
return {
msg: 'HelloJerry'
}
},
template: '<div>{{msg}}</div>'
};
var vm = new Vue({
el: '#app',
data: {
},
components: {
'hello-world': HelloWorld,
'hello-tom': HelloTom,
'hello-jerry': HelloJerry
}
});
頁面中的應(yīng)用
<div id="app"> <hello-world></hello-world> <hello-tom></hello-tom> <hello-jerry></hello-jerry> <test-com></test-com> </div>
以上就是Vue 組件注冊全解析的詳細內(nèi)容，更多關(guān)于Vue 組件注冊的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家介紹了vue.js前端網(wǎng)頁彈框異步的行為示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助祝大家多多進步，早日升職加薪2021-11-11
這篇文章主要為大家學(xué)習(xí)介紹了Vue3如何使用echarts實現(xiàn)繪制儀表盤，文中的示例代碼積極學(xué)習(xí)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07
vue-cli3使用postcss-plugin-px2rem方式
這篇文章主要介紹了vue-cli3使用postcss-plugin-px2rem方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
對vuejs的v-for遍歷、v-bind動態(tài)改變值、v-if進行判斷的實例講解
今天小編就為大家分享一篇對vuejs的v-for遍歷、v-bind動態(tài)改變值、v-if進行判斷的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue項目刷新當(dāng)前頁面的三種方式(重載當(dāng)前頁面數(shù)據(jù))
這篇文章主要介紹了vue項目刷新當(dāng)前頁面的三種方式(重載當(dāng)前頁面數(shù)據(jù)),本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue使用xe-utils函數(shù)庫的具體方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vuejs使用FormData實現(xiàn)ajax上傳圖片文件
本篇文章主要介紹了vuejs使用FormData實現(xiàn)ajax上傳圖片文件，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了vue通過?API?監(jiān)聽數(shù)組的變化,在?Vue?中，你可以通過監(jiān)聽數(shù)組的變化來更新界面，Vue?提供了一些特殊的語法以及?API?來實現(xiàn)對數(shù)組的監(jiān)聽，本文通過實例代碼介紹的非常詳細，需要的朋友可以參考下2023-05-05
SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問題的解決方法
這篇文章主要介紹了SpringBoot+Vue前后端分離，使用SpringSecurity完美處理權(quán)限問題,需要的朋友可以參考下2018-01-01
toRef 和 toRefs都是Vue3 中的響應(yīng)式轉(zhuǎn)換工具函數(shù),換句話說,toRef 和 toRefs 就是用來創(chuàng)建響應(yīng)式的引用的,主要用來取出響應(yīng)式對象里的屬性,或者解構(gòu)響應(yīng)式對象,本文小編就來帶大家搞清楚Vue3中toRef和toRefs的區(qū)別,需要的朋友可以參考下2023-09-09