您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Vue中函數(shù)化組件的示例分析,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
介紹
之前創(chuàng)建的錨點(diǎn)標(biāo)題組件是比較簡(jiǎn)單,沒(méi)有管理或者監(jiān)聽(tīng)任何傳遞給他的狀態(tài),也沒(méi)有生命周期方法。它只是一個(gè)接收參數(shù)的函數(shù)。
在這個(gè)例子中,我們標(biāo)記組件為 functional, 這意味它是無(wú)狀態(tài)(沒(méi)有 data),無(wú)實(shí)例(沒(méi)有 this 上下文)。
一個(gè) 函數(shù)化組件 就像這樣:
Vue.component('my-component', { functional: true, // 為了彌補(bǔ)缺少的實(shí)例 // 提供第二個(gè)參數(shù)作為上下文 render: function (createElement, context) { // ... }, // Props 可選 props: { // ... } })
組件需要的一切都是通過(guò)上下文傳遞,包括:
props: 提供props 的對(duì)象
children: VNode 子節(jié)點(diǎn)的數(shù)組
slots: slots 對(duì)象
data: 傳遞給組件的 data 對(duì)象
parent: 對(duì)父組件的引用
listeners: (2.3.0+) 一個(gè)包含了組件上所注冊(cè)的 v-on 偵聽(tīng)器的對(duì)象。這只是一個(gè)指向 data.on 的別名。
injections: (2.3.0+) 如果使用了 inject 選項(xiàng), 則該對(duì)象包含了應(yīng)當(dāng)被注入的屬性。
在添加 functional: true 之后,錨點(diǎn)標(biāo)題組件的 render 函數(shù)之間簡(jiǎn)單更新增加context參數(shù),this.$slots.default 更新為 context.children,之后this.level 更新為 context.props.level。
因?yàn)楹瘮?shù)化組件只是一個(gè)函數(shù),所以渲染開(kāi)銷也低很多。另外,這也意味著函數(shù)化組件不會(huì)出現(xiàn)在 VueJS Chrome 開(kāi)發(fā)者工具的組件樹(shù)里。
在作為包裝組件時(shí)它們也同樣非常有用,比如,當(dāng)你需要做這些時(shí):
程序化地在多個(gè)組件中選擇一個(gè)
在將 children, props, data 傳遞給子組件之前操作它們。
下面是一個(gè)依賴傳入 props 的值的smart-list組件例子,它能代表更多具體的組件:
var EmptyList = { /* ... */ } var TableList = { /* ... */ } var OrderedList = { /* ... */ } var UnorderedList = { /* ... */ } Vue.component('smart-list', { functional: true, render: function (createElement, context) { function appropriateListComponent () { var items = context.props.items if (items.length === 0) return EmptyList if (typeof items[0] === 'object') return TableList if (context.props.isOrdered) return OrderedList return UnorderedList } return createElement( appropriateListComponent(), context.data, context.children ) }, props: { items: { type: Array, required: true }, isOrdered: Boolean } })
slots()和children對(duì)比
你可能想知道為什么同時(shí)需要 slots()
和children
。slots().default
不是和 children
類似的嗎?在一些場(chǎng)景中,是這樣,但是如果是函數(shù)式組件和下面這樣的 children
呢?
<my-functional-component> <p slot="foo"> first </p> <p>second</p> </my-functional-component>
對(duì)于這個(gè)組件,children 會(huì)給你兩個(gè)段落標(biāo)簽,而 slots().default 只會(huì)傳遞第二個(gè)匿名段落標(biāo)簽,slots().foo 會(huì)傳遞第一個(gè)具名段落標(biāo)簽。同時(shí)擁有 children 和 slots() ,因此你可以選擇讓組件通過(guò) slot() 系統(tǒng)分發(fā)或者簡(jiǎn)單的通過(guò) children 接收,讓其他組件去處理。
示例
漸進(jìn)過(guò)渡
之前的Vue學(xué)習(xí)筆記進(jìn)階篇——列表過(guò)渡及其他中可復(fù)用的過(guò)渡提到用函數(shù)組件實(shí)現(xiàn)合適,下面就用函數(shù)化組件來(lái)實(shí)現(xiàn)那個(gè)漸進(jìn)過(guò)渡
<div id="app5"> <input v-model="query"> <my-transition :query="query" :list="list"> <li v-for="(item, index) in computedList" :key="item.msg" :data-index="index"> {{item.msg}} </li> </my-transition> </div> Vue.component('my-transition', { functional:true, render:function (h, ctx) { var data = { props:{ tag:'ul', css:false }, on:{ beforeEnter:function (el) { el.style.opacity = 0 el.style.height = 0 }, enter:function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity(el, {opacity:1, height:'1.6em'},{complete:done}) }, delay) }, leave:function (el, done) { var delay = el.dataset.index * 150 setTimeout(function () { Velocity(el, {opacity:0, height:0}, {complete:done}) }, delay) } } } return h('transition-group', data, ctx.children) }, props:['query', 'list'] }) var app5 = new Vue({ el:'#app5', data:{ query:'', list:[ {msg:'Bruce Lee'}, {msg:'Jackie Chan'}, {msg:'Chuck Norris'}, {msg:'Jet Li'}, {msg:'Kung Furry'}, {msg:'Chain Zhang'}, {msg:'Iris Zhao'}, ] }, computed:{ computedList:function () { var vm = this return this.list.filter(function (item) { return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1 }) } }, })
運(yùn)行結(jié)果:
關(guān)于“Vue中函數(shù)化組件的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(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)容。