本文為轉(zhuǎn)載灿渴，原文：Vue學(xué)習(xí)筆記進(jìn)階篇——函數(shù)化組件
介紹
之前創(chuàng)建的錨點(diǎn)標(biāo)題組件是比較簡單无拗，沒有管理或者監(jiān)聽任何傳遞給他的狀態(tài)茎用，也沒有生命周期方法绝淡。它只是一個(gè)接收參數(shù)的函數(shù)缠捌。
在這個(gè)例子中乳蛾，我們標(biāo)記組件為 functional， 這意味它是無狀態(tài)（沒有 data）鄙币，無實(shí)例（沒有 this 上下文）肃叶。
一個(gè) 函數(shù)化組件 就像這樣：
Vue.component('my-component', {
functional: true,
// 為了彌補(bǔ)缺少的實(shí)例
// 提供第二個(gè)參數(shù)作為上下文
render: function (createElement, context) {
// ...
},
// Props 可選
props: {
// ...
}
})
組件需要的一切都是通過上下文傳遞，包括：
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 偵聽器的對(duì)象十嘿。這只是一個(gè)指向 data.on 的別名因惭。
injections: (2.3.0+) 如果使用了 inject 選項(xiàng), 則該對(duì)象包含了應(yīng)當(dāng)被注入的屬性。
在添加 functional: true 之后绩衷，錨點(diǎn)標(biāo)題組件的 render 函數(shù)之間簡單更新增加context參數(shù)蹦魔，this.$slots.default 更新為 context.children，之后this.level 更新為 context.props.level咳燕。
因?yàn)楹瘮?shù)化組件只是一個(gè)函數(shù)勿决，所以渲染開銷也低很多。另外招盲，這也意味著函數(shù)化組件不會(huì)出現(xiàn)在 VueJS Chrome 開發(fā)者工具的組件樹里低缩。
在作為包裝組件時(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 類似的嗎玩般？在一些場景中，是這樣礼饱，但是如果是函數(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() 镰吆，因此你可以選擇讓組件通過 slot() 系統(tǒng)分發(fā)或者簡單的通過 children 接收帘撰，讓其他組件去處理。
示例
漸進(jìn)過渡
之前的Vue學(xué)習(xí)筆記進(jìn)階篇——列表過渡及其他中可復(fù)用的過渡提到用函數(shù)組件實(shí)現(xiàn)合適万皿，下面就用函數(shù)化組件來實(shí)現(xiàn)那個(gè)漸進(jìn)過渡
<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é)果：
完
本文為原創(chuàng)摧找，轉(zhuǎn)載請(qǐng)注明出處核行。
上一節(jié)：Vue學(xué)習(xí)筆記進(jìn)階篇——Render函數(shù)
返回目錄
下一節(jié)：Vue學(xué)習(xí)筆記進(jìn)階篇——vue-cli安裝及介紹
