vue学记笔记(十七) Vue3.0之卡槽

Vue3.0 卡槽的使用和传值

使用 v-slot 来命名后边跟卡槽要传递过来的值

子组件

• slot name=名字

• 后边接收要传递过来的值

<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 包裹,v-slot:加名字 = 后面是数据

<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 './H1'
  export default {
    components: { Child },
  }
</script>