Vuejs插槽十八

<--! 使用插槽的组件（父组件）-->
<template>
  <div class="container">
    <div class="one">
      <category title="美食">
        <img src="./assets/logo.png" slot="center" />
        <a href="#" slot="footer">美食</a>
      </category>
      <!-- <category title="游戏">
        <ul slot="center">
          <li v-for="(g, index) in games" :key="index">{{ g }}</li>
        </ul>
        <a href="#" slot="footer">游戏</a>
      </category> -->
      <category title="电影">
        <h4>我插了一段视频</h4>
        <div class="film" slot="footer">
          <a href="#">经典</a>
          <a href="#">热门</a>
          <a href="#">推荐</a>
        </div>
      </category>
    </div>
    <div class="two">
      <slot-areas title="游戏">
        <template scope="{games}">
          <ul>
            <li v-for="(g, index) in games" :key="index">{{ g }}</li>
          </ul>
        </template> 
      </slot-areas>
    </div>
  </div>
</template>

<script>
import Category from "./components/Category";
import slotAreas from "./components/slotAreas";
export default {
  name: "App",
  data() {
    return {
      foods: ["小龙虾", "大闸蟹", "寿司", "甜肠"],
      // games: ["消消乐", "贪吃蛇", "数字游戏", "猜谜语"],
      films: ["大闹天宫", "蓝精灵", "红孩儿", "包青天"],
    };
  },
  components: { Category, slotAreas },
};
</script>

<--!默认插槽和具名插槽-->
<template>
  <div class="category">
    <h3>{{title}}分类</h3>
    <slot name="center">我是默认内容，当没有传递其它内容时，就是把我显示出来</slot>
    <slot name="footer">链接</slot>
  </div>
</template>

<script>
export default {
  name: 'Category',
  props: ['title']

}
</script>

<--!作用域插槽-->
<template>
  <div class="category">
    <h3>{{title}}分类</h3>
    <slot :games="games"></slot>
  </div>
</template>

<script>
export default {
  name: 'slotAreas',
  props: ['title'],
  data() {
    return {
      games: ["消消乐", "贪吃蛇", "超级玛利亚", "猜谜语"]
    }
  }
}
</script>

• 将组件标签中的元素替换掉slot标签，slot标签不会再浏览器DOM结构中,具名插槽则是将所在插槽的标签放在插槽对应name属性的位置，不会将标签以外的内容放入进去；

• template标签可以包裹元素，并且该标签不会展示在结果标签里面；

• 默认插槽：在子组件中定义的时候写一个slot标签占位，可以在slot标签中写默认元素，然后在使用到子组件标签的地方在组件标签中写上自己需要的元素，如果没有写，就会显示默认slot里面的元素；

• 具名插槽：在slot插槽上使用name属性给插槽标记，在使用的时候再标签元素上写slot属性是插槽的name属性，就可以将对应的元素替换到对应的插槽中；如果使用template包裹，在template上面就可以使用v-slot:插槽name属性的形式来写；

• 作用域插槽：数据是在定义插槽的组件中，但是使用插槽在另一个组件，这样就可以在使用插槽的组件中用template把需要替换插槽的内容写在里面，template标签使用scope=“自定义”的形式，并且在定义插槽的slot上面把数据传递过去：:data="data;传递到使用的组件scope的值就是传递过来的数据，该数据是一个对象，对象的key为数据的属性名，value就是数据的值；