网站设计模板源码免费培训网站

vue2子组件使用render，给子子组件插槽传值
和elementui的Table一样使用render
在 Vue 2 中，子组件使用render函数向子子组件插槽传值可以通过以下步骤实现：

1、创建子组件
首先创建一个子组件，在子组件中使用render函数来渲染内容。在render函数中，可以通过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.$slots.default或this.$scopedSlots获取插槽内容，并将其传递给子子组件。

<div id="app"><child-component><sub-child-component slot="slotName" message="这是传递给子子组件的值"></sub-child-component></child-component>
</div>