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>