Vue插槽

插槽内容：

<template>
  <div>
    <p>-----------------组件基础之通过插槽分发内容(默认插槽)---------------------</p>
    <alert-box>Something bad happended</alert-box>
  </div>
</template>
<script>
import AlertBox from "@/components/AlertBox";
export default {
  components: { "alert-box": AlertBox }
};
</script>

<style>
</style>

<template>
  <div class="demo-alert-box">
    <strong>Error!</strong>
    <slot></slot>
  </div>
</template>

<script>
export default {};
</script>
<style>
.demo-alert-box {
  margin: 0 auto;
  background-color: #f3beb8;
   550px;
}
</style>

具名插槽

<template>
  <section>
    <div id="demo33-1">
      <p>-----------组件基础之通过插槽分发内容（具名插槽）slot已被废弃---------------</p>我是父组件。
      下面是子组件：
      <son>
        <!-- <p slot="header">头部</p> -->
        <template slot="header">
          <p>头部</p>
        </template>
        <p>我是卖报的行家</p>
        <p slot="footer">尾部</p>
      </son>
    </div>
    <div id="demo33-2">
      <p>-----------组件基础之通过插槽分发内容（具名插槽）新的写法一---------------</p>我是父组件。
      下面是子组件：
      <son>     
        <template #header>
          <p>头部</p>
        </template>
        <template #default>我是卖报的行家</template>
        <template #footer><p>尾部</p></template>
      </son>
    </div>
    <div id="demo33-3">
      <p>-----------组件基础之通过插槽分发内容（具名插槽）新的写法二---------------</p>我是父组件。
      下面是子组件：
      <son>
        <!-- <p slot="header">头部</p> -->
        <template v-slot:header>
          <p>头部</p>
        </template>        
          <!-- v-slot 和 v-shot:default 是一样的效果 -->
         <template v-slot:default>我是卖报的行家</template>
        <template v-slot:footer><p>尾部</p></template>
      </son>
    </div>
  </section>
</template>

<script>
import son from "@/components/Son";
export default {
  components: { son }
};
</script>

<style>
</style>

 

<template>
    <div>
        <slot name="header"></slot>
        <slot name="footer"></slot>
        我是子组件。
    </div>
</template>

 

作用域插槽

<template>
  <section>
    <div id="demo34-1">
      <p>--------组件基础之通过插槽分发内容（slot-scope作用域插槽已被废弃）----------</p>
      <child :lists="nameList">
        <template slot-scope="a">{{a}}</template>
      </child>

      <child :lists="nameList">
        <template slot-scope="a">
          <div v-if="a.bbb.id===1">
            你好：
            <span>{{a.bbb.name}}</span>
          </div>
          <div v-else>{{a.bbb.name}}</div>
        </template>
      </child>
    </div>
    <div id="demo34-2">
      <p>--------组件基础之通过插槽分发内容（新写法v-slot）----------</p>
      <!-- v-slot 和 v-shot:default 是一样的效果 -->
      <child :lists="nameList">
        <!-- <template v-slot="a">{{a}}</template> -->
        <template v-slot>{{a}}</template>
      </child>

      <child :lists="nameList">
        <template v-slot="a">
          <div v-if="a.bbb.id===1">
            你好：
            <span>{{a.bbb.name}}</span>
          </div>
          <div v-else>{{a.bbb.name}}</div>
        </template>
      </child>
    </div>
  </section>
</template>

<script>
import child from "@/components/Child";
export default {
  components: { child },
  data() {
    return {
      nameList: [
        { id: 1, name: "孙悟空" },
        { id: 2, name: "猪八戒" },
        { id: 3, name: "沙和尚" },
        { id: 4, name: "唐僧" },
        { id: 5, name: "小白龙" }
      ]
    };
  }
};
</script>

<style>
</style>

<template>
    <div>
        <ul>
            <li v-for="(list,index) in lists" :key=index>
                <slot :bbbb="list"></slot>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:['lists']
}
</script>

https://www.cnblogs.com/chinabin1993/p/9115396.html   Vue 插槽详解

  vue中的插槽--slot和v-slot  https://blog.csdn.net/xiaolinlife/article/details/89517928