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>
Logo

前往低代码交流专区

更多推荐