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

 

子组件写法如下

<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 }" /> ，但是我个人不推荐这样写，有点懵逼。