模仿elementui的Table,实现思路
vue2子组件使用render,给子子组件插槽传值
和elementui的Table一样使用render
在 Vue 2 中,子组件使用render函数向子子组件插槽传值可以通过以下步骤实现:
1、创建子组件
首先创建一个子组件,在子组件中使用render函数来渲染内容。在render函数中,可以通过this.
s
l
o
t
s
.
d
e
f
a
u
l
t
获取父组件传递过来的默认插槽内容,通过
t
h
i
s
.
slots.default获取父组件传递过来的默认插槽内容,通过this.
slots.default获取父组件传递过来的默认插槽内容,通过this.scopedSlots获取父组件传递过来的具名插槽内容。
Vue.component('child-component', {
render: function (createElement) {
// 获取父组件传递的默认插槽内容
var defaultSlot = this.$slots.default;
// 获取父组件传递的具名插槽内容
var namedSlot = this.$scopedSlots && this.$scopedSlots.slotName;
return createElement('div', [
createElement('p', '这是子组件'),
// 渲染默认插槽内容
defaultSlot,
// 渲染具名插槽内容
namedSlot && namedSlot()
]);
}
});
2、创建子子组件
创建一个子子组件,该组件接收一个prop属性来获取父组件传递的值。
Vue.component('sub-child-component', {
props: ['message'],
template: '<div>{{ message }}</div>'
});
3、使用子组件和子子组件
在父组件中使用子组件,并通过插槽向子组件传递内容。在子组件中,通过this.
s
l
o
t
s
.
d
e
f
a
u
l
t
或
t
h
i
s
.
slots.default或this.
slots.default或this.scopedSlots获取插槽内容,并将其传递给子子组件。
<div id="app">
<child-component>
<sub-child-component slot="slotName" message="这是传递给子子组件的值"></sub-child-component>
</child-component>
</div>