Vue 組件注冊(cè)全解析
全局組件注冊(cè)語(yǔ)法
components中的兩個(gè)參數(shù)組件名稱和組件內(nèi)容
Vue.component(組件名稱, {
data: 組件數(shù)據(jù),
template:組件模板內(nèi)容
})
全局組件注冊(cè)應(yīng)用
組件創(chuàng)建：
Vue.component('button-counter', {
data: function(){
return {
count: 0
}
},
template: '<button @click="handle">點(diǎn)擊了{(lán){count}}次</button>',
methods: {
handle: function(){
this.count ++;
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
});
如何在頁(yè)面中運(yùn)用，直接在頁(yè)面中應(yīng)用組件名稱
<div id="app"> <button-counter></button-counter> </div>
這個(gè)組件是可以重用的，直接在頁(yè)面中多次使用，切數(shù)據(jù)相互獨(dú)立，互不干擾
組件注冊(cè)注意事項(xiàng)
1.data必須是一個(gè)函數(shù)
- 分析函數(shù)與普通對(duì)象的對(duì)比
2.組件模板內(nèi)容必須是單個(gè)根元素
- 分析演示實(shí)際的效果
3.組件模板內(nèi)容可以是模板字符串
- 模板字符串需要瀏覽器提供支持（ES6語(yǔ)法）
4.組件命名方式
- 短橫線方式
Vue.component('my-component',{/*...*/})
駝峰方式
Vue.component('MyComponent',{/*...*/})
如果使用駝峰式命名組件，那么在使用組件的時(shí)候，只能在字符串模板中用駝峰的方式使用組件，但是在普通的標(biāo)簽?zāi)０逯?，必須使用短橫線的方式使用組件
局部組件
局部組件只能在注冊(cè)它的父組件中使用
局部組件注冊(cè)語(yǔ)法
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è)面中的應(yīng)用
<div id="app"> <hello-world></hello-world> <hello-tom></hello-tom> <hello-jerry></hello-jerry> <test-com></test-com> </div>
以上就是Vue 組件注冊(cè)全解析的詳細(xì)內(nèi)容，更多關(guān)于Vue 組件注冊(cè)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Vue-cli3簡(jiǎn)單使用(圖文步驟)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
這篇文章主要介紹了Vue中的同步和異步調(diào)用順序，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
vue如何移動(dòng)到指定位置(scrollIntoView)親測(cè)避坑
這篇文章主要介紹了vue如何移動(dòng)到指定位置(scrollIntoView)親測(cè)避坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue監(jiān)聽(tīng)滾動(dòng)條頁(yè)面滾動(dòng)動(dòng)畫(huà)示例代碼
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,與其它大型框架不同的是,Vue?被設(shè)計(jì)為可以自底向上逐層應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue監(jiān)聽(tīng)滾動(dòng)條頁(yè)面滾動(dòng)動(dòng)畫(huà)的相關(guān)資料,需要的朋友可以參考下2023-06-06
Vue 中 reactive創(chuàng)建對(duì)象類型響應(yīng)式數(shù)據(jù)的方法
在 Vue 的開(kāi)發(fā)世界里,響應(yīng)式數(shù)據(jù)是構(gòu)建交互性良好應(yīng)用的基礎(chǔ),之前我們了解了ref用于定義基本類型的數(shù)據(jù),今天就來(lái)深入探討一下如何使用reactive定義對(duì)象類型的響應(yīng)式數(shù)據(jù),感興趣的朋友一起看看吧2025-02-02
Vue.js進(jìn)階知識(shí)點(diǎn)總結(jié)
給大家分享了關(guān)于Vue.js想成為高手的5個(gè)總要知識(shí)點(diǎn)，需要的朋友可以學(xué)習(xí)下。2018-04-04
手把手教你用vue3開(kāi)發(fā)一個(gè)打磚塊小游戲
這篇文章主要給大家介紹了關(guān)于如何利用vue3開(kāi)發(fā)一個(gè)打磚塊小游戲的相關(guān)資料,通過(guò)一個(gè)小游戲?qū)嵗梢钥焖倭私鈜ue3開(kāi)發(fā)小游戲的流程,需要的朋友可以參考下2021-07-07
vue3整合SpringSecurity加JWT實(shí)現(xiàn)權(quán)限校驗(yàn)
本文主要介紹了vue3整合SpringSecurity加JWT實(shí)現(xiàn)權(quán)限校驗(yàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
<Teleport> 是 Vue 3 的一個(gè)內(nèi)置組件,允許將組件的內(nèi)容渲染到 DOM 中的任意位置,而不改變其邏輯結(jié)構(gòu),這篇文章主要介紹了Vue 3 的＜Teleport＞功能與用法詳解,需要的朋友可以參考下2025-04-04
vue改變循環(huán)遍歷后的數(shù)據(jù)實(shí)例
今天小編就為大家分享一篇vue改變循環(huán)遍歷后的數(shù)據(jù)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11