vue插槽v-slot总结

简单的说插槽就是在组件中预留代码空间，其中显示内容由父组件进行控制。

Vue插槽可分为以下三种：

• 匿名插槽（匿名代码空间）
• 具名插槽（命名的代码空间）
• 作用域插槽（实际上就是包含数据的代码空间）

slot 和 slot-scope 这两个目前已被废弃，尚未移除，推荐使用v-slot。

具体使用如下

父组件中

<template>
  <div>
    <component-b>
    
      <!-- 对应子组件<slot name="header" :sonMsg="msg"></slot>，是作用域插槽 -->
      <template v-slot:header="slotProps">
        <h1>{{slotProps.sonMsg + ' ' + msg}}</h1>
      </template>

      <!-- 对应子组件<slot></slot>，是匿名插槽  -->
      <p>匿名插槽显示这句话</p>
      
      <!-- 对应子组件<slot name="footer"></slot> ，是具名插槽 -->
      <template v-slot:footer>
        <p>具名插槽显示这句话</p>
      </template>
      
    </component-b>
  </div>
</template>

<script>
import componentB from "./ComponentB.vue";
export default {
  components: {
    componentB
  },
  data() {
    return {
      msg: "作用域插槽显示这句话"
    };
  }
};
</script>

子组件中

<template>
  <div>

    <!-- 作用域插槽 -->
    <header>
      <slot name="header" :sonMsg="msg"></slot>
    </header>

    <!-- 匿名插槽 -->
    <slot></slot>、

    <!-- 具名插槽 -->
    <footer>
      <slot name="footer"></slot>
    </footer>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "我是来自子组件的消息"
    };
  }
};
</script>

---

以上就是Vue插槽的具体使用。