Vue插槽(Slot)使用简明笔记

插槽Solt

1、什么是插槽：

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。

2、默认插槽：

默认插槽是插槽最基本的方式：
首先在父组件App.Vue中引入子组件，并在引入的子组件标签内插入需要的html元素，在子组件中把需要用插槽的地方用标签替代

2.1 父组件

    <MySlot title="一个标题">
      <ul>
        <li v-for="(g, index) in games" :key="index">{{ g }}</li>
      </ul>
    </MySlot>

数据

  data() {
    return { 
      games: ["英雄联盟", "炉石传说", "穿越火线", "QQ飞车", "吃鸡"]
    };
  },

2.2 子组件

<template>
    <!-- 默认插槽 -->
    <div class="box">
      <h4>{{title}}</h4>
      <slot></slot>
    </div>
  </template>

  <script>
  export default {
      name:'MySlot',
      props:['title'],
  }
  </script>

2.3效果

3、具名插槽

简单来说，所谓的具名插槽就是有名字的插槽
那它和默认插槽有什么不同呢？
有时候我们会遇到这种场景，在一个组件中，我们虽然可以复用组件的结构，但是往往，有时候我们会遇到一个组件多用，但是结构稍微有所差别的情况，这时，就会用得到具名插值。

3.1 父组件

<MySlotJm title="传入一个标题">
      <!-- 具名插槽的写法 1 -->
      <template slot="one">
        <ul>
          <li v-for="(g, index) in games" :key="index">{{ g }}</li>
        </ul>
      </template>
      <!-- 具名插槽的写法 2 -->
      <template v-slot:tow>
        <a href="#">官网由此进入</a>
      </template>
    </MySlotJm>

3.2 子组件

<template>
  <!-- 具名插槽 -->
  <div class="box">
    <h4>{{ title }}</h4>
    <!-- 每个插槽有自己的name属性 -->
    <slot name="one"></slot>
    <slot name="tow"></slot>
  </div>
</template>

  <script>
export default {
  name: "MySlotJm",
  props: ["title"],
};
</script>

3.3 效果

4、作用域插槽

数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定，也就是说，作用域插槽的不同之处就在于，数据不在父组件身上，而是在子组件身上，且组件的结构和内容由父组件决定。作用域组件限定了组件内结构和数据的展示范围，以便在开发中我们可以根据一个组件而不断变换其中的内容和结构。

4.1 父组件

     <!-- 第一种结构  -->
    <MySlotZyy title="标题-第一种结构"  > 
      <!-- slot-scope拿到数据 -->
        <template slot-scope="data">
         <ul>
            <li v-for="(d,index) in data.mList" :key="index">{{ d }}</li>
         </ul>
      </template>
      </MySlotZyy>
          <!-- 第二种结构 -->
      <MySlotZyy title="标题-第二种结构"  > 
        <template slot-scope="data">
         <ol>
            <li v-for="(d,index) in data.mList" :key="index">{{ d }}</li>
         </ol>
      </template>
      </MySlotZyy>

4.2 子组件

<template>
  <!-- 作用域插槽 -->
  <div class="box">
    <h4>{{title}}</h4>
    <!-- 把数据传给插入的html部分 -->
    <!-- v-bind:数据名=“数据值” -->
    <slot :mList="movies"></slot>
  </div>
</template>

  <script>
export default {
  name: "MySlotZyy",
  props: ["title"],
  data(){
    return{
      movies:['蜘蛛侠', '复仇者联盟', '金刚狼', '触不可及', '唐人街探案','当幸福来敲门']

    }
  }

};
</script>

4.3效果