slots()和
children。
slots().default 不是和
children 类似的吗？在一些场景中，是这样，但是如果是函数式组件和下面这样的
children 呢？
<my-functional-component>
<p slot="foo">
first
</p>
<p>second</p>
</my-functional-component>对于这个组件，children 会给你两个段落标签，而 slots().default 只会传递第二个匿名段落标签，slots().foo 会传递第一个具名段落标签。同时拥有 children 和 slots() ，因此你可以选择让组件通过 slot() 系统分发或者简单的通过 children 接收，让其他组件去处理。
示例
渐进过渡
之前的Vue学习笔记进阶篇——列表过渡及其他中可复用的过渡提到用函数组件实现合适，下面就用函数化组件来实现那个渐进过渡
<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) {
