Vue插槽(slot)

什么叫插槽

插槽（Slot）是 Vue 提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

插槽的分类

插槽有三种：默认插槽、具名插槽、作用域插槽。

1.默认插槽

如果父组件没有设置“修改插槽信息”,那么运行出来的值就是“默认插槽内容”，有的话就会覆盖默认信息

//子组件
<template>
  <div>
    <slot>默认插槽内容</slot>
  </div>
</template>

// 父组件， 使用前记得import引入子组件 
// import SlotChild from '@/components/Slot/index.vue'
<template>
  <div>
    <SlotChild>修改插槽信息</SlotChild>
  </div>
</template>

2.具名插槽（简单的说就是有名字标识的插槽）

如果父组件没有设置“修改插槽信息”,那么运行出来的值就是“默认插槽内容”，有的话就会覆盖默认信息

// 子组件
<template>
  <div>
    <slot name="slotName">带有名字标识的默认插槽内容</slot>
  </div>
</template>

// 父组件
<template>
  <div>
   <!-- 带有名字的插槽 -->
   <SlotChild>
      <template slot="slotName">修改有名字的插槽信息</template>
      <p slot="slotName">修改有名字的插槽信息</p>
    </SlotChild>
    
    <!-- vue2.6版本之后语法的更新 -->
    <SlotChild>
    // v-slot不可以写在p标签上,只可以写在template上
      <template v-slot:slotName>修改有名字的插槽信息</template>
    </SlotChild>
    
    <!-- v-slot: 的缩写# -->
	<SlotChild>
      <template #slotName>修改有名字的插槽信息</template>
    </SlotChild>
  </div>
</template>

3.作用域插槽

// 子组件
<template>
  <div>
  	// 此处的row自定义名字, data就是绑定的数据，可以供父级使用
    <slot :row="data">绑定数据的默认插槽内容</slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: ["1", "2", "3"],
    };
  },
};
</script>

// 父组件
<template>
  <div>
    <!-- 绑定数据的插槽 -->
    <SlotChild>
    // 此处scope也可以使用ES6 解构赋值 {}
      <template slot-scope="scope">
        {{ scope.row }}
      </template>
      <p slot-scope="scope">
      	{{ scope.row }}
	  </p>
    </SlotChild>
  </div>
</template>

4.具名且绑定数据的插槽

// 子组件
<template>
  <div>
    <slot name="slotName" :row="data">带有名字且绑定数据的默认插槽内容</slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: ["1", "2", "3"],
    };
  },
};
</script>

// 父组件
<template>
  <div>
    <SlotChild>
      <template slot="slotName" slot-scope="scope">
        {{ scope.row }}
      </template>
      <p slot="slotName" slot-scope="scope">
        {{ scope.row }}
      </p>
    </SlotChild>
    <!-- vue2.6版本之后语法的更新 -->
    <SlotChild>
    // v-slot不可以写在p标签上,只可以写在template上
      <template v-slot:slotName="scope">
        {{ scope.row }}
      </template>
    </SlotChild>
  </div>
</template>

注意！！

v-slot: 的缩写可以简写成#
例如 :
1.v-slot:aaa=“scope” ==> #aaa=“scope” 前提是必须具有名字的插槽
2. v-slot:aaa ===> #aaa
v-slot不能写在p标签上，只能写在template上