Vue3种常用插槽的使用

插槽总结 ：

• 插槽的作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
• 分类：默认插槽、具名插槽、作用域插槽

1、默认插槽

父组件中：

        <Category>
           <div>html结构1</div>
        </Category>

子组件中：

        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

 

2、具名插槽

适用场景：父子组件通信（一般传递的是结构）

子组件：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="footer"></slot>
  </div>
</template>

父组件：

<template>
  <div>
    <!-- -->
    <Son>
      <template slot="header">
        <div>html结构1</div>
      </template>
      <template slot="footer">
        <div>html结构2</div>
      </template>
    </Son>
  </div>
</template>

 

3、作用域插槽

数据在子组件的自身，但组件的使用者（父组件）根据子组件中的数据生成对应的自己的DIY结构。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

适用场景：父子组件通信（一般父组件向子组件传递结构）

子组件：

<template>
  <div>
    <slot :games="games"></slot>
  </div>
</template>

<script>
export default {
  name: "Son",
  props: ["title"],
  data() {
    return {
      games: ["肯德基", "德克士", "麦当劳", "华莱士"],
    };
  },

  mounted() {},
};
</script>

父组件：

<template>
  <div>
    <!-- -->
    <Son>
      <template scope="scopeData">
        <ul>
          <li v-for="(item, index) in scopeData.games" :key="index">
            {{ item }}
          </li>
        </ul>
      </template>
    </Son>
    <Son>
      <template scope="scopeData">
        <ul>
          <h3 v-for="(item, index) in scopeData.games" :key="index">
            {{ item }}
          </h3>
        </ul>
      </template>
    </Son>
  </div>
</template>