Vue slot 跨组件传递
Vue slot 跨组件传递、Vue slot 透传、Vue slot 多级传递、很多情况下,我们需要使用到嵌套组件,嵌套组件中深层的组件如何获取外部传进来的 slot 呢?
·
很多情况下,我们需要使用到嵌套组件,嵌套组件中深层的组件如何获取外部传进来的 slot 呢?
比如我们有一个三层嵌套组件
<grandfather>
<parent>
<child></child>
</parent>
</grandfather>
// child 组件
<slot name="child" :childData="obj">
<view class="item-menu-name">{{obj.name}}</view>
</slot>
当你在 grandfather 传VNode给 child 组件时,该怎么办呢
嵌套传递
1. 首选在 grandfather 组件正常写你需要传给 child 组件的VNode,如下:
<template v-slot:child="{ childData }">
<view>{{ childData.sex }}</view>
</template>
2. 在 parent 传递 VNode、slot
<child>
<template v-slot:child="{childData}">
<slot name="child" :childData="childData" />
</template>
</child>
结束,完成了。缺点就是如果层级太深太麻烦,不过一般情况可以使用
更多推荐
已为社区贡献1条内容
所有评论(0)