vue slot插槽

插槽：

样式既可以放入父组件也可以放入子组件
在父组件中：<子组件></子组件> 中 插入内容
在子组件中：slot 要插入的位置

我配置的子组件：components: { B }

默认插槽

// 父组件的template 
<B>
      <h2>提示</h2>
      <h4>slot插入到demo: 当只有一个卡槽且没有name属性时不用slot属性</h4>
</B>

// 子组件 B 的 template
<slot></slot>

具名插槽

把要插入的全部内容用template包裹

// 父组件 
<B>
	 <!-- <template slot="demo"> -->
     <template v-slot:demo> // 2.6之后（包括3）写法（推荐）
        <h2>提示</h2>
        <h4 slot="demo">
          slot插入到demo: 当只有一个卡槽且没有name属性时不用slot属性
        </h4>
     </template>
</B>

// 子组件 B
<slot></slot>

作用域插槽

// 此数据在子组件
data() {
    return {
      games: ["吃", "喝", "玩", "乐"],
      title:'游戏'
    }
  }

// 父组件
<B>
      <!-- slot-scope 将子组件的数据传入，注意用template包裹 -->
      <!-- <template slot-scope="{ games, title }" > -->
      <template v-slot="{ title, games }"> // 2.6之后写法（推荐）
        <h2>{{ title }}</h2>
        <ol>
          <li v-for="(game, index) in games" :key="index">{{ game }}</li>
        </ol>
      </template>
</B>

// 子组件
<slot :games="games" :title="title"></slot>

注意：如果不用解构，写成 v-slot:demo=“BB” ，表示子组件传入的数据，
引用：BB.title , BB.games

具名和作用域插槽

// 此数据在子组件
data() {
    return {
      games: ["吃", "喝", "玩", "乐"],
      title:'游戏'
    }
  }

// 父组件
<B>
    <!-- <template slot-scope="{ games, title }" slot="demo"> -->
    <template v-slot:demo="{ title, games }">
      <h2>{{ title }}</h2>
      <ol>
        <li v-for="(game, index) in games" :key="index">{{ game }}</li>
      </ol>
    </template>
</B>

// 子组件
<slot name="demo" :games="games" :title="title"></slot>