vue 匿名插槽、具名插槽、作用域插槽的使用

 

一、匿名插槽：

在子组件中：

//     slotdemo.vue
<template>
  <div>
    hello
    <slot />  //占位
  </div>
</template>

在父子件中引入子组件：

    作用：引入子组件时如果想在子组件中加内容。

<slot-demo >
      这是一个匿名插槽
</slot-demo>

显示效果：

hello  这是一个匿名插槽

二、具名插槽：

在子组件中：

//     slotdemo.vue
<template>
  <div>
    hello
    <slot name="names" />       //names：  跟父组件中名字对应
  </div>
</template>

在父组件中：

<slot-demo>
   <div slot="names">这是一个具名插槽</div>       //names:跟子组件名字对应
</slot-demo>

显示效果：

hello  这是一个具名插槽

三、作用域插槽

在子组件中：

//     slotdemo.vue
<template>
  <div>
    hello
    <slot v-bind:user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        firstName: "1",
        lastName: "这是一个作用域插槽",
      },
    };
  },
};
</script>

在子组件中：

<slot-demo v-slot="slotProps">
    {{ slotProps.user.lastName }}
</slot-demo>
//slotProps  :自定义名称

显示效果：

hello 这是一个作用域插槽