87,903
社区成员
发帖
与我相关
我的任务
分享vue怎样在渲染函数render中指定具名插槽?
需求如下, 下面是vue单文件组件的模板伪代码:
实际需求是不通过模板的方式渲染, 而是通过render的方式进行渲染(下图按照官方文档的做法)
以下是app.vue中
运行直接报错: $scopedSlots.default不是一个函数, 那么怎样通过render渲染函数指定具名插槽呢?文档只是说明了默认的作用域插槽的指定, 麻烦大神给解答下
<template>
<div>
<slot name='t1'></slot>
</div>
</template>实际需求是不通过模板的方式渲染, 而是通过render的方式进行渲染(下图按照官方文档的做法)
Vue.component('my', {
render: function(createElement){
var vnode = this.$scopedSlots.default({name: 't1'});
return createElement('div', [vnode])
})
}以下是app.vue中
<div id="test">
<my>
<template v-slot:t1>hello</template>
</my>
</div>运行直接报错: $scopedSlots.default不是一个函数, 那么怎样通过render渲染函数指定具名插槽呢?文档只是说明了默认的作用域插槽的指定, 麻烦大神给解答下
...全文
请发表友善的回复…
发表回复
xjx199403 2021-09-14
- 打赏
- 举报
楼主解决了吗？我也想知道怎么在render里面放动态的slot的name
luj_1768 2020-03-11
- 打赏
- 举报
default是标记不是函数，仔细看例程。思路没错，就是没有按例程指导写代码。
烟村四五家a 2020-03-10
- 打赏
- 举报
我还是自己研究出来吧, 在此总结下:
Vue的模板渲染DOM有两种方式, 通过template指定和render进行指定, render更接近底层, 通过JS的方法生成模板进行渲染, 这个方法灵活, 能够一定程度简化代码(官方文档关于渲染的示例)这边就补充下官方文档render有关于插槽的渲染:
1. render实现default普通default插槽:
用template生成:
<template>
<div>
<slot></slot>
</div>
</template>render: function(createElement){
return createElement('div', this.$slots.default)
}<template>
<div>
<slot name="t1"></slot>
<slot name="t2"></slot>
</div>
</template>render: function(createElement){
return createElement('div', [this.$slots.t1, this.$slots.t2]);
}<template>
<div>
<slot :title="title"></slot>
<slot name="t1" :title="title"></slot>
</div>
</template>render: function(createElement){
return createElement('div', [
this.$scopedSlots.default({title: this.title}),
this.$scopedSlots.t1({title: this.title})
])
}<template>
<div>
<Test>
<template v-slot="p1">这个是默认的作用域插槽: {{ p1.title }}</template>
<template v-slot:t1="p2">这是是具名作用域插槽: {{ p2.title }}</template>
</Test>
</div>
</template>weixin_41281899 2021-12-13
- 举报
厉害了我的哥，找了好久
baiy20151018b 2020-03-09
- 打赏
- 举报
app.vue中，slot不是用v-引用
<div id="test">
<my>
<template slot:t1>hello</template>
</my>
</div>烟村四五家a 2020-03-09
- 打赏
- 举报
我需要在我的组件中使用一个带有名字的slot插槽, 但是不是用模板,而是用的render渲染,不知道咋在渲染中加具名 插槽
console.log( ) 2020-03-09
- 打赏
- 举报
我咋没懂啥意思
用ref？
console.log( ) 2020-03-09
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="t1">
<test>
<slot name='t'></slot>
</test>
</div>
</body>
<script type="text/javascript">
Vue.component('test', {
render: function(createElement){
return createElement('div', {
slot:'t',
domProps: {
innerHTML: '123'
},
})
}
});
new Vue({
el: '#t1'
})
</script>
</html>console.log( ) 2020-03-09
- 打赏
- 举报
我需要在我的组件中使用一个带有名字的slot插槽, 但是不是用模板,而是用的render渲染,不知道咋在渲染中加具名 插槽[/quote]
看是上面的效果吗[/quote]不是的, 我最终想要的效果页面只有123,我在给您详细说明下:
一个自定义组件, 这是标准的模板写法
Vue.component('test', {
template: `<div><slot name="t"></slot></div>`
});
但是因为业务需求, 无法使用template来渲染,只能用render函数来渲染, 怎么使用render实现上面的模板效果? 真的是麻烦您了[/quote]
我也不是太懂 之前用过render函数渲染
我看你这好像是创建父组件 子组件是123，你要想显示123，设置父组件的值为123不就行了
子组件不应该就是显示父组件的内容吗
烟村四五家a 2020-03-09
- 打赏
- 举报
我需要在我的组件中使用一个带有名字的slot插槽, 但是不是用模板,而是用的render渲染,不知道咋在渲染中加具名 插槽[/quote]
看是上面的效果吗[/quote]不是的, 我最终想要的效果页面只有123,我在给您详细说明下:
一个自定义组件, 这是标准的模板写法
Vue.component('test', {
template: `<div><slot name="t"></slot></div>`
});
但是因为业务需求, 无法使用template来渲染,只能用render函数来渲染, 怎么使用render实现上面的模板效果? 真的是麻烦您了
console.log( ) 2020-03-09
- 打赏
- 举报
我需要在我的组件中使用一个带有名字的slot插槽, 但是不是用模板,而是用的render渲染,不知道咋在渲染中加具名 插槽[/quote]
看是上面的效果吗
console.log( ) 2020-03-09
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="t1">
<test>
<slot name='t'>123</slot>
</test>
</div>
</body>
<script type="text/javascript">
Vue.component('test', {
render: function(createElement){
return createElement('div', {
slot:'t',
domProps: {
innerHTML: 'baz'
},
})
}
});
new Vue({
el: '#t1'
})
</script>
</html>烟村四五家a 2020-03-09
- 打赏
- 举报
不是=号吗
<template slot:t1>hello</template>[/quote]那个手误了,我写的是伪代码, 你们关注的重点错了, 我的问题是如果在渲染中加具名插槽,前面的<template>只是我想最终渲染的效果参考[/quote]
这样试试
Vue.component('my', {
render: （h）=>{
return this.$createElement('div', {
slot：‘t1’
})
})
}[/quote]无效果, 我吧源码给你看,您运行下,麻烦了:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="t1">
<test>
<template v-slot:t>123</template>
</test>
</div>
</body>
<script type="text/javascript">
Vue.component('test', {
render: function(h){
return this.$createElement('div', {
slot: 't'
})
}
});
new Vue({
el: '#t1'
})
</script>
</html>console.log( ) 2020-03-09
- 打赏
- 举报
不是=号吗
<template slot:t1>hello</template>[/quote]那个手误了,我写的是伪代码, 你们关注的重点错了, 我的问题是如果在渲染中加具名插槽,前面的<template>只是我想最终渲染的效果参考[/quote]
这样试试
Vue.component('my', {
render: （h）=>{
return this.$createElement('div', {
slot：‘t1’
})
})
}
baiy20151018b 2020-03-09
- 打赏
- 举报
不是=号吗
<template slot:t1>hello</template>[/quote]那个手误了,我写的是伪代码, 你们关注的重点错了, 我的问题是如果在渲染中加具名插槽,前面的<template>只是我想最终渲染的效果参考[/quote]
你还有地方有手误吗？
烟村四五家a 2020-03-09
- 打赏
- 举报
不是=号吗
<template slot:t1>hello</template>[/quote]那个手误了,我写的是伪代码, 你们关注的重点错了, 我的问题是如果在渲染中加具名插槽,前面的<template>只是我想最终渲染的效果参考
console.log( ) 2020-03-09
- 打赏
- 举报
不是=号吗
<template slot:t1>hello</template>
