最近研究了vue的官方文档,到组件自定义渲染函数时,对第二个属性对象参数中的scopedSlots不太明白作用是什么,官网的案例也是一笔带过,于是连查带试算是明白了他的作用,这里记录一下,希望能帮到遇到相同问题的童鞋.
先说一下函数中的$slots吧,这个用起来很简单,直接获取到组件中对应的插槽虚拟节点.this.$slots.插槽名称.
废话少说,直接上代码:
<div id="app">
<cus-node>
<template v-slot:content>
Hello everyone, I'm content slot!
</template>
</cus-node>
</div>
<script type="text/javascript">
Vue.component ("cus-node", {
render: function (createElement) {
return createElement ("div", [
createElement ("h1", "the title"),
//这里直接把上面template中的内容搞到p标签里面
createElement ("p", this.$slots.content)
]);
}
});
var vm = new Vue ({
el: "#app"
});
</script>效果如下:
下面来看一下this.$scopedSlots的用法和作用, 个人认为,他的作用是向插槽内传递参数,代码如下:
<div id="app">
<cus-node>
<template v-slot:title="datas">
<div>
new title: today is a special day <br />
old title: {{datas.name}}
</div>
</template>
<template v-slot:content>
he content slot
</template>
</cus-node>
</div>
<script type="text/javascript">
Vue.component ("cus-node", {
render: function (createElement) {
//切记, 插槽如上面的写法: v-slot:title="datas"酱紫是无法使用this.$slots获取的!!!
console.log (this.$slots.title);//undefined
return createElement ("div", [
//把title插槽内容放在h1标签中,并向title插槽传递一个参数name
createElement ("h1", this.$scopedSlots.title ({
name: this.name
})),
//把content插槽植入新创建的p之中
createElement ("p", this.$slots.content)
]);
},
data: function () {
return {
name: "component data title"
}
}
});
var vm = new Vue ({
el: "#app"
});
</script>this.$scopedSlots同样是获取到插槽内容,比this.$slots厉害的一点是他可以向插槽中传递参数,只需要在调用的时候传递一个参数对象就好了.值得注意的是,父组件插入插槽标签的时候,如果使用属性v-slot:name="datas"的方式获取参数时,this.$slots是获取不到内容的,打印为undefined.
接下来,看一下大Boss:scopedSlots属性.
上面两个都是获取到父组件中创建的插槽,而scopedSlots属性是创建一个插槽,当在渲染函数中创建自定义组件时,可以使用这个属性创建一个插槽进去.直接上代码吧:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>vue pro</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<cus-node2>origin cus-node2</cus-node2>
</div>
<script type="text/javascript">
//定义组件cus-node1
Vue.component ("cus-node1", {
//向default插槽传递一个text参数,当没有default插槽时,展示cus-node1 default slot
template: "<div>this is cus-node1<slot :text='text'>cus-node1 default slot</slot></div>",
data: function () {
return {
text: "I'm cus-node1.text"
}
}
});
//定义组件cus-node2
Vue.component ("cus-node2", {
render: function (createElement) {
//创建一个cus-node1标签
return createElement ("cus-node1", {
scopedSlots: {
//创建一个default插槽插入cus-node1中
default: function (props) {
//此处props为cus-node1组件向default插槽传递的参数
//插槽内容是一个span标签,如果cus-node1有对插槽传递text参数时,就展示出来;否则展示props.text is null
return createElement ("span", props.text || "props.text is null");
}
}
});
}
});
var vm = new Vue ({
el: "#app"
});
</script>
</body>
</html>注释很详细了,效果如下:
可以看到span标签就是创建出的插槽.贼6!
好了,希望能帮助大家,有错误的地方欢迎大家指正.转载请表明出处,蟹蟹
6300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
