您好,登錄后才能下訂單哦!
這篇文章主要總結(jié)Vue關(guān)于組件化開發(fā)知識(shí)點(diǎn),內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
全局組件注冊(cè)
Vue.component('first-component', { data: function () { return { count: 0 } }, template: '<button @click="count++">{{ count }}</button>' })
data 必須是一個(gè)函數(shù)
組件模板內(nèi)容必須是單個(gè)根元素
組件模板內(nèi)容可以是模板字符串
全局組件可以嵌套全局組件
組件命名方式
Vue.component('first-component', {/* .... */}) // 普通標(biāo)簽?zāi)0逯胁荒苁褂民劮? 只能在template中使用駝峰方式 Vue.component('firstComponent', {/* .... */})
局部組件注冊(cè)
局部注冊(cè)的組件只能在父組件中使用 ;
var vm = new Vue({ components: { 'hello-world': { data: function () { return { msg: 'hello world' } }, template: '<div>{{ msg }}</div>' } } })
props 傳遞數(shù)據(jù)原則 : 單向數(shù)據(jù)流
組件內(nèi)部通過 props 接收傳遞過來的值
Vue.component('son-com', { props: ['msg', 'parentMsg'] template: '<div>{{msg + "---" + parentMsg}}</div>' })
父組件通過屬性將值傳遞給子組件
<son-com msg="父組件的值" :parent-msg="bind綁定的父組件的值"></son-com>
props 屬性名規(guī)則
props 傳遞類型
<div id="app"> <son-com :str="pstr" :num="pnum" <!-- 注意如果不用 v-bind 則獲取不到準(zhǔn)確的屬性值 --> :boolean="pboolean" :arr="parr" :obj="pobj" > </son-com> </div>
Vue.component('son-com', { props: ['str', 'num', 'boolean', 'arr', 'obj'], template: ` <div> <div>{{ str }}</div> <div>{{ num }}</div> <div>{{ boolean }}</div> <ul> <li :key="index" v-for="(item, index) in arr">{{ item }}</li> </ul> <div> <span>{{ obj.name }}</span> <span>{{ obj.age }}</span> </div> </div> ` })
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: ` <div> <button @click="$emit('parent')">點(diǎn)擊放大父組件字體</button> 傳值從第二個(gè)參數(shù)開始 <button @click="$emit('parent', 10)">點(diǎn)擊放大父組件字體</button> </div> ` })
父組件監(jiān)聽子組件事件
<div id="app"> <div>父組件</div> <son-com @parent="handle"></son-com> <!-- 接收值為固定 $event--> <son-com @parent="handle($event)"></son-com> </div>
var vm = new Vue({ el: '#app', data: { font: 10 }, methods: { handle: function (val) { this.font += 5 this.font += val // 此時(shí)的val就是 子組件傳遞過來的值 } }, })
非父子組件傳值
單獨(dú)的事件中心管理組件之間的通信
// 創(chuàng)建事件中心 var hub = new Vue() // 在 mounted 中監(jiān)聽事件 hub.$on('eventName', fn) hub.$off('eventName') // 銷毀事件 // 在 methods 中處理事件 hub.$emit('eventName', param)
組件插槽
<tmp-com> <!-- 只能匹配一個(gè)標(biāo)簽 --> <p slot="header">程序錯(cuò)誤</p> <div>我是沒有匹配的內(nèi)容</div> <!-- 可以匹配多個(gè)標(biāo)簽 --> <template slot="footer"> <p>匹配頁腳一次</p> <p>匹配頁腳兩次</p> </template> </tmp-com>
Vue.component('tmp-com', { template: ` <div> <header> <slot name="header"></slot> </header> <div> 如果上面沒有匹配到對(duì)應(yīng)的標(biāo)簽就會(huì)展示默認(rèn)內(nèi)容 <slot></slot> </div> <footer> <slot name="footer"></slot> </footer> </div> ` })
看完上述內(nèi)容,是不是對(duì)總結(jié)Vue關(guān)于組件化開發(fā)知識(shí)點(diǎn)有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。