Vue中插槽的使用

1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

2.分类：默认插槽、具名插槽、作用域插槽

3.使用方式：

　　①默认插槽      当父组件没有插入时，插槽显示默认内容（一般slot标签内部不写内容）

父组件中：
        <Category>
           <div>父组件使用插槽后的内容</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

　　②具名插槽   使用场景很多

父组件中：
    <HelloWorld>
      <template slot="center">   <!--1. 这种写法废弃  -->
        <div>html结构1</div>
      </template>

      <template v-slot:footer>  <!--2. 新写法  #footer   -->
        <div>html结构2</div>
      </template>
    </HelloWorld>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

　　③作用域插槽

•   数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，比如两个地方都需要使用这个子组件，但是在子组件需要展示不同是数据结构，可以通过这个方法解决。

//父组件根据子组件的数据生成对应的结构插入到子组件中去
<template>
  <div>
    <HelloWorld :tableData="tableData">
      <template v-slot:default="scope">     新写法 #default="scope"
      {{scope.data.name}}              //data是子组件slot传过来的值
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import HelloWorld from "../components/HelloWorld.vue";
export default {
  components: { HelloWorld },
  setup() {
    const state = reactive({
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          slot: 'data',
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
           slot: 'name',
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        slot: 'province',

        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
           slot: 'address',
        },
      ],
    });

    return {
      ...toRefs(state),
    };
  },
};
</script>
 
//子组件将数据传递给父组件
<template>
  <div>
    <li v-for="(item, index) in tableData" :key="index">
      <slot :data="item" :index="index"></slot>
    </li>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  props: ["tableData"],
  setup() {
    const state = reactive({
      count: "子组件",
    });

    return {
      ...toRefs(state),
    };
  },
};
</script>
 
<style>
 
</style>