这两天学习了Vue.js 感觉函数化组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记
介绍
之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法。它只是一个接收参数的函数。
在这个例子中,我们标记组件为 functional, 这意味它是无状态(没有 data),无实例(没有 this 上下文)。
一个 函数化组件 就像这样:
组件需要的一切都是通过上下文传递,包括:
- props: 提供props 的对象
- children: VNode 子节点的数组
- slots: slots 对象
- data: 传递给组件的 data 对象
- parent: 对父组件的引用
- listeners: (2.3.0+) 一个包含了组件上所注册的 v-on 侦听器的对象。这只是一个指向 data.on 的别名。
- injections: (2.3.0+) 如果使用了 inject 选项,则该对象包含了应当被注入的属性。
在添加 functional: true 之后,锚点标题组件的 render 函数之间简单更新增加context参数,this.$slots.default 更新为 context.children,之后this.level 更新为 context.props.level。
因为函数化组件只是一个函数,所以渲染开销也低很多。另外,这也意味着函数化组件不会出现在 VueJS Chrome 开发者工具的组件树里。
在作为包装组件时它们也同样非常有用,比如,当你需要做这些时:
程序化地在多个组件中选择一个
在将 children,props,data 传递给子组件之前操作它们。
下面是一个依赖传入 props 的值的smart-list组件例子,它能代表更多具体的组件:
slots()和children对比
你可能想知道为什么同时需要 slots() 和children 。slots().default 不是和 children 类似的吗?在一些场景中,是这样,但是如果是函数式组件和下面这样的 children 呢?
对于这个组件,children 会给你两个段落标签,而 slots().default 只会传递第二个匿名段落标签,slots().foo 会传递第一个具名段落标签。同时拥有 children 和 slots() ,因此你可以选择让组件通过 slot() 系统分发或者简单的通过 children 接收,让其他组件去处理。
示例
渐进过渡
之前的中可复用的过渡提到用函数组件实现合适,下面就用函数化组件来实现那个渐进过渡
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,{opacity:0,height:0},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
})
}
},})
运行结果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|