一文详解Vue中插槽的具体使用

//定义一个组件Box
<template>
    <div>
        <div>这是一个定义了插槽的组件</div>
        <slot></slot>
        <div>组件其它内容</div>
    </div>
</template>

//使用上面的组件
<Box>
   <template>
       <div>插槽中展示的内容</div>
   </template>
</Box>

//定义一个组件Box
<template>
    <div>
        <div>这是一个定义了插槽的组件</div>
        <!-- 通过slot定义了一个插槽,并在插槽中给出了默认值 -->
        <slot>
            <div>这是插槽的默认内容</div>
        </slot> 
        <div>组件其它内容</div>
    </div>
</template>

<Box>
    <template>
        <div>插槽中展示的内容</div>
    </template>
</Box>

<Box></Box>

<template>
    <div class="box">
        <span>我是组件的内容</span>
        <div class="slots">
            <!-- 定义名字为left的插槽 -->
            <div class="left">
                <slot name="left"></slot>
            </div>
            <!-- 定义名字为center的插槽 -->
            <div class="center">
                <slot name="center"></slot>
            </div>
            <!-- 定义名字为right的插槽 -->
            <div class="right">
                <slot name="right"></slot>
            </div>
        </div>
        <div>组件其他内容</div>
    </div>
</template>

<Box>
      <!-- 使用v-slot:插槽名字 -->
      <template v-slot:left>
        我是left插槽的内容
      </template>
      <!-- 使用#插槽名字 -->
      <template #center>
        我是center插槽的内容
      </template>
      <template #right>
        我是right插槽的内容
      </template>
</Box>

<template>
    <div class="box">
        <span>我是组件的内容</span>
        <div class="slotBox">
            <slot name="slotBox1" :data="list"></slot>
            <slot name="slotBox2" :data="list"></slot>
        </div>
        <div>组件其他内容</div>
    </div>
</template>
<script>
export default {
    name: "slotPiece",
    data() {
        return {
            list: [{
                txt: '内容1',
                id: 1
            }, {
                txt: '内容2',
                id: 2
            }, {
                txt: '内容3',
                id: 3
            }, {
                txt: '内容4',
                id: 4
            }]
        };
    },
}
</script>

<Box>
      <template #slotBox1="data">
        <!-- 接收过来不解构为下面的结构： -->
        <div>
          <div>我是不解构的数据</div>
          {{ data }}
        </div>
        <!-- 通过属性取值： -->
        <div>
          <div>通过属性取值</div>
          {{ data.data }}
        </div>
      </template>
      <!-- 通过{ }结构数据 -->
      <template #slotBox2="{ data }">
        <div>
          <div>我是解构后的数据</div>
          {{ data }}
          <div>使用或修改数据</div>
          <div v-for="hl in data">内容：{{ hl.txt }}</div>
        </div>
      </template>
</Box>