vue2如何给孙辈传递slot,孙如何给父传递参数
先将父传递给儿子,再儿子传递给孙子
用惯了vue3,vue2好久没写了,很多都有点忘记了。
如果是vue3可以考虑在孙中获取父的slot dom(this.$parent.$parent.$slot
),再用jsx写法render渲染即可,没实测,只是我个人想法
demo
- 1、父亲辈parent.vue
<!-- 引用子组件 -->
<child-list>
<template slot="search_item_display_time" slot-scope="{search}">
<!-- 不用slot-scope新版本的写法 <template v-slot:search_item_display_time="{search}"> -->
<div>{{search}}</div>
</template>
</child-list>
- 2、子辈child.vue
<!-- 引用孙组件 -->
<grandson-list>
<template slot="search_item" slot-scope="{search}">
<slot name="search_item_display_time" :search="search"></slot>
<!-- 列表中name动态就这样写 <slot :name="'search_item_'+search.key" :search="search"></slot> -->
</template>
</grandson-list>
3、孙辈grandson.vue
<div>
<slot name="search_item" :search="{key:'name'}"></slot>
</div>