這篇文章主要總結(jié)Vue關(guān)于組件化開發(fā)知識點，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比黔西南州網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式黔西南州網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋黔西南州地區(qū)。費(fèi)用合理售后完善，十載實體公司更值得信賴。
全局組件注冊
重慶分公司
重慶分公司
Vue.component('first-component', {
data: function () {
return {
count: 0
}
},
template: ''
})data 必須是一個函數(shù)
組件模板內(nèi)容必須是單個根元素
組件模板內(nèi)容可以是模板字符串
全局組件可以嵌套全局組件
組件命名方式
Vue.component('first-component', {/* .... */})
// 普通標(biāo)簽?zāi)０逯胁荒苁褂民劮? 只能在template中使用駝峰方式
Vue.component('firstComponent', {/* .... */})局部組件注冊
局部注冊的組件只能在父組件中使用 ;
var vm = new Vue({
components: {
'hello-world': {
data: function () {
return {
msg: 'hello world'
}
},
template: '{{ msg }}'
}
}
})props 傳遞數(shù)據(jù)原則 : 單向數(shù)據(jù)流
組件內(nèi)部通過 props 接收傳遞過來的值
Vue.component('son-com', {
props: ['msg', 'parentMsg']
template: '{{msg + "---" + parentMsg}}'
})父組件通過屬性將值傳遞給子組件
props 屬性名規(guī)則
props 傳遞類型
:boolean="pboolean" :arr="parr" :obj="pobj" >
Vue.component('son-com', {
props: ['str', 'num', 'boolean', 'arr', 'obj'],
template: `
{{ str }}
{{ num }}
{{ boolean }}
- {{ item }}
{{ obj.name }}
{{ obj.age }}
`
})var vm = new Vue({
el: '#app',
data: {
pstr: 'hello Vue',
pnum: 12,
pboolean: true,
parr: ['apple', 'banner', 'orange'],
pobj: {name: 'zs', age: 22}
}
})子組件向父組件傳值
子組件通過自定義事件向父組件傳值 $emit()
Vue.component('son-com', {
template: `
傳值從第二個參數(shù)開始
`
})父組件監(jiān)聽子組件事件
父組件
var vm = new Vue({
el: '#app',
data: {
font: 10
},
methods: {
handle: function (val) {
this.font += 5
this.font += val // 此時的val就是 子組件傳遞過來的值
}
},
})非父子組件傳值
單獨的事件中心管理組件之間的通信
// 創(chuàng)建事件中心
var hub = new Vue()
// 在 mounted 中監(jiān)聽事件
hub.$on('eventName', fn)
hub.$off('eventName') // 銷毀事件
// 在 methods 中處理事件
hub.$emit('eventName', param)組件插槽
程序錯誤
我是沒有匹配的內(nèi)容匹配頁腳一次
匹配頁腳兩次
Vue.component('tmp-com', {
template: `
如果上面沒有匹配到對應(yīng)的標(biāo)簽就會展示默認(rèn)內(nèi)容
看完上述內(nèi)容，是不是對總結(jié)Vue關(guān)于組件化開發(fā)知識點有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
