vue3插槽

在Vue 3中，插槽是一种让父组件能够向子组件传递内容的机制。插槽可以分为默认插槽、具名插槽和作用域插槽。

1、默认插槽：子组件在模板中预留一个插槽，父组件可以传入内容填充这个插槽。

1）子组件（Child.vue）：

<template>

  <div>

    <slot>默认内容</slot>

  </div>

</template>

2）父组件：

<template>

  <Child>

    <p>这是父组件传递的内容。</p>

  </Child>

</template>

2、具名插槽：子组件可以定义多个插槽，父组件传递内容时需要指定插槽的名字。

1）子组件：

<template>

  <div>

    <slot name="header"></slot>

    <slot name="main"></slot>

    <slot name="footer"></slot>

  </div>

</template>

2）父组件：

<template>

  <Child>

    <template v-slot:header>

      <h1>页头内容</h1>

    </template>

    <template v-slot:main>

      <p>主体内容</p>

    </template>

    <template v-slot:footer>

      <footer>页脚内容</footer>

    </template>

  </Child>

</template>

3、作用域插槽：除了传递内容，插槽还可以提供数据给父组件使用。

1）子组件：

<template>

  <div>

    <slot :user="user">{{ user.name }}</slot>

  </div>

</template>

<script>

export default {

  data() {

    return {

      user: { name: '张三', age: 30 }

    };

  }

};

</script>

2）父组件：

<template>

  <Child>

    <template v-slot:default="slotProps">

      <p>用户名: {{ slotProps.user.name }}</p>

      <p>用户年龄: {{ slotProps.user.age }}</p>

    </template>

  </Child>

</template>

4、总结

在Vue 3中，插槽的使用有所简化，v-slot指令被简化为 # 和 v-slot:，最新的语法形式如下：

<Child>

  <template #header>

    <h1>页头内容</h1>

  </template>

  <template #main>

    <p>主体内容</p>

  </template>

  <template #footer>

    <footer>页脚内容</footer>

  </template>

</Child>

以上代码展示了如何在Vue 3中使用默认插槽、具名插槽和作用域插槽