天天学习一个vue知识点呀html
咱们将这样的组件标记为functional:vue
{
functional: true,
// Props 是可选的
props: {
// ...
},
// 为了弥补缺乏的实例
// 提供第二个参数做为上下文
render: function (createElement, context) {
// ...
}
}
复制代码
组件须要的一切都是经过 context 参数传递,它是一个包含以下字段的对象:数组
程序化地在多个组件中选择一个来代为渲染;app
在将 children、props、data 传递给子组件以前操做它们; 下面是一个 smart-list 组件的例子,它能根据传入 prop 的值来代为渲染更具体的组件:ide
var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }
Vue.component('smart-list', {
functional: true,
props: {
items: {
type: Array,
required: true
},
isOrdered: Boolean
},
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
)
}
})
复制代码
分析:函数
从字面意思显而易见:学习
children,能够获取当前组件节点的全部的子节点;ui
slots()函数返回了全部的插槽对象; 举例:this
<my-functional-component>
<p v-slot:foo>
first
</p>
<p>second</p>
</my-functional-component>
复制代码
对于以上示例组件:spa
总结: