vue多层级组件间插槽使用
插槽使用不仅仅存在于父子组件间,当涉及跨级使用时如何处理呢?这里我们以示例的方式进行说明。有一爷爷辈(Level1)组件嵌套了爸爸辈(Level2)组件,爸爸辈组件中又嵌入了儿子辈(Level3)组件,现需要在爷爷辈组件中设置孙子组件中插槽的内容,实现方式如下:儿子(level3)组件:<template><div><h1>谁的{{goods}}?</h1
·
插槽使用不仅仅存在于父子组件间,当涉及跨级使用时如何处理呢?这里我们以示例的方式进行说明。
有一爷爷辈(Level1)组件嵌套了爸爸辈(Level2)组件,爸爸辈组件中又嵌入了儿子辈(Level3)组件,现需要在爷爷辈组件中设置孙子组件中插槽的内容,实现方式如下:
儿子(level3)组件:
<template>
<div>
<h1>谁的{{goods}}?</h1>
<!-- 定义插槽用于接受其父级组件的插槽内容 -->
<slot name="cont" :slotData="goods">I am level3's {{goods}}!</slot>
</div>
</template>
<script>
export default{
data(){
return {
goods: "apple"
}
}
}
</script>
爸爸(level2)组件:
1)方式1:模板方式:
<template>
<level3>
<!-- 调用子组件的插槽,向子组件传递内容 -->
<template v-slot:cont="{goods}">
<!-- 定义插槽用于接受其父级组件的插槽内容 -->
<slot name="cont" :slotData="goods">I am level2's {{goods}}!</slot>
</template>
</level3>
</template>
<script>
import level3 from "./level3.vue";
export default{
components: {
level3
}
}
</script>
2)方式2:渲染函数方式:
export default {
render(createElement) {
return createElement(
'level3',
{
scopedSlots: this.$scopedSlots // 将父组件的作用域插槽传递给子组件
}
);
}
}
爷爷(level1)组件:
<template>
<level2>
<!-- 调用子组件的插槽,向子组件传递内容 -->
<template v-slot:cont="{goods}">
<div style="color:red">I am level1's {{goods}}!</div>
</template>
</level2>
</template>
<script>
import level2 from "./level2.vue";
export default{
components: {
level2
}
}
</script>
更多推荐
已为社区贡献11条内容
所有评论(0)