全局組件注冊(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)０逯胁荒苁褂民劮? 只能在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)部通過(guò) props 接收傳遞過(guò)來(lái)的值

Vue.component(’son-com’, {props: [’msg’, ’parentMsg’] template: ’<div>{{msg + '---' + parentMsg}}</div>’})

父組件通過(guò)屬性將值傳遞給子組件

<son-com msg='父組件的值' :parent-msg='bind綁定的父組件的值'></son-com>

props 屬性名規(guī)則

在props中使用駝峰形式, 模板中需要使用短橫線(xiàn)的形式 ; html 對(duì)大小寫(xiě)的不敏感的 字符串中沒(méi)有這個(gè)限制

props 傳遞類(lèi)型

<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} }})

子組件向父組件傳值

子組件通過(guò)自定義事件向父組件傳值 $emit()

Vue.component(’son-com’, { template: ` <div> <button @click='$emit(’parent’)'>點(diǎn)擊放大父組件字體</button> 傳值從第二個(gè)參數(shù)開(kāi)始 <button @click='$emit(’parent’, 10)'>點(diǎn)擊放大父組件字體</button> </div> `})

父組件監(jiān)聽(tīng)子組件事件

<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就是 子組件傳遞過(guò)來(lái)的值 } },})

非父子組件傳值

單獨(dú)的事件中心管理組件之間的通信

// 創(chuàng)建事件中心var hub = new Vue()// 在 mounted 中監(jiān)聽(tīng)事件hub.$on(’eventName’, fn)hub.$off(’eventName’) // 銷(xiāo)毀事件// 在 methods 中處理事件hub.$emit(’eventName’, param)

組件插槽

<tmp-com> <!-- 只能匹配一個(gè)標(biāo)簽 --> <p slot='header'>程序錯(cuò)誤</p> <div>我是沒(méi)有匹配的內(nèi)容</div> <!-- 可以匹配多個(gè)標(biāo)簽 --> <template slot='footer'> <p>匹配頁(yè)腳一次</p> <p>匹配頁(yè)腳兩次</p> </template></tmp-com>

Vue.component(’tmp-com’, { template: ` <div> <header> <slot name='header'></slot> </header> <div> 如果上面沒(méi)有匹配到對(duì)應(yīng)的標(biāo)簽就會(huì)展示默認(rèn)內(nèi)容 <slot></slot> </div> <footer> <slot name='footer'></slot> </footer> </div> `})

到此這篇關(guān)于Vue關(guān)于組件化開(kāi)發(fā)知識(shí)點(diǎn)詳解的文章就介紹到這了,更多相關(guān)Vue 組件化開(kāi)發(fā)內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！