render函数创建插槽
来源:4-8 Dropdown 组件基本功能编码
有没有没被占用的昵称
2021-02-01
render创建,sfc填充
请教下老师,如果我想使用render函数为组件自身创建一个插槽位的话,我下面的做法有问题吗?
如下代码可以达到一个默认插槽,插槽数据为默认数据的效果吗
- 下面的代码我主要是想创建一个含有默认插槽,默认插槽默认内容为默认数据的组件
<script>
export default {
name: 'index',
data () {
return {
list: [
1, 2, 3
]
}
},
render (h) {
return h('div', [
this.list.map((item, index) => {
if (item % 2 === 1) {
return h('div', {
key: index,
ref: 'test',
refInFor: true
}, 'test')
}
}),
h('slot', {}, '默认数据') // 这里创建插槽,感觉写得有问题
])
}
}
</script>
- 这里是父组件的代码
<template>
<div>
<component-demo1> // demo1的代码,请看3
*************
<template #jsx>
<component-demo2 /> // demo2的代码,请看4
</template>
</component-demo1>
<component-demo3> // 这里的demo3插件就是1部分的代码,这样写达不到覆盖插槽默认内容的效果
<div>1111</div>
</component-demo3>
</div>
</template>
- demo1代码
<template>
<div ref="demo3">
<div>sfc组件</div>
<slot> // 有默认内容的默认插槽
<div>-----------------</div>
</slot>
<slot name="jsx"></slot> // 具名插槽
</div>
</template>
- demo2代码
export default {
name: 'ComponentDemo2',
render (h) {
return h('div', {
slot: 'jsx' // 老师我比较想知道这个’slot‘属性到底有啥用
}, 'slot')
}
}
上面的代码demo1和demo2是没有问题的,这里面我的疑问主要是
- renderFunction 第二个参数对象中的slot属性有什么用
- 如果我想不这么写
<template #jsx>
<component-demo2 />
</template>
仅仅通过<component-demo2 />
来填充具名插槽jsx应该如何实现
demo3的代码是有问题的,渲染出来还是显示’默认数据‘
- 那么通过createElement如何创建插槽和具名插槽呢
请老师指点迷津,谢谢啦,老师过年好
写回答
1回答
-
张轩
2021-02-02
同学你好 1 h 的第二个参数是 节点的属性,你这里就是在节点上添加一个 slot="jsx" 的属性没有实际意义。
1 通过 h 创建 slot,需要使用 this.$slots 这个组件实例上的全局属性
return h('div', this.$slots.default()) //返回 <div><slot></slot></div> return h('div', this.$slots.test()) // 返回<div><slot name="test"></slot></div>
怎样添加 slot 的默认值,我也在研究,文档中没有说明,https://v3.vuejs.org/guide/render-function.html#slots
022021-02-03
相似问题