vue2如何给孙辈传递slot,孙如何给父传递参数

本文详述了如何在Vue2中通过`slot`和`slot-scope`实现从父到子再到孙辈组件之间的参数传递,以及如何在子组件中接收并传递孙辈组件的参数。通过实例演示了在旧版本的Vue中处理父子组件通信的方法。
摘要由CSDN通过智能技术生成

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值