vue3.0 已经废弃slot, vue3.0 更改之前slot正确方法介绍

本文介绍了Vue3.0中slot的变更,包括子组件的写法和父组件的调整。在Vue3.0中,通过自定义命名值可以实现父组件获取子组件的对象数据,而子组件向父组件传递单个或多个值则可以通过props进行。对于多个数据的传递,可以使用`v-bind`传一个对象。尽管`v-bind`可以缩写为`:`,但为了避免混淆,作者建议避免这种缩写。" 79062435,3766217,Spring Cloud Eureka快速入门:服务注册与发现,"['Spring Cloud', 'Eureka', '微服务架构']

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

子组件写法如下

<template>
  <table>
    <tr>
      <th>默认插槽:</th>
      <td><slot /></td>
    </tr>
    <tr>
      <th>具名插槽:</th>
      <td><slot name="footer" /></td>
    </tr>
    <tr>
      <th>传参插槽:</th>
      <td><slot name="bottom" :color="color" /></td>
    </tr>
    <tr>
      <th>传对象参插槽:</th>
      <td><slot name="object" v-bind="{ old, name }" /></td>
    </tr>
  </table>
</template>
<script>
export default {
  setup () {
    return {
      color: 'red',
      old: 34,
      name: 'FungLeo'
    }
  }
}
</script>

父组件改成

 

<template>
  <Child>
    这些文字将显示在组件默认插槽内
    <template v-slot:footer>
      这里的文字会显示在组件的具名插槽内
    </template>
    <template v-slot:bottom="scope">
      文字右边会有个颜色值 >>> {{scope.color}}
    </template>
    <template v-slot:object="scope">
      文字右边会有多个数据 >>> 名字:{{scope.name}},年龄:{{scope.old}}
    </template>
  </Child>
</template>
<script>
import Child from '@/components/child.vue'
export default {
  components: { Child }
}
</script>

 

可以看到,我们的父组件获取子组件传值,可以通过 v-slot 的自定义命名值来获取对象数据。

而子组件给父组件传值,如果是传单个值,可以用 :color="color" 这样的语法来进行传值。如果要传多个数据,则可以使用 v-bind 来传一个对象出去。

刚刚尝试了一下,v-bind 可以缩写成 : 也就是说,上面的代码可以写成 <slot name="object" :="{ old, name }" /> ,但是我个人不推荐这样写,有点懵逼。

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值