Vue：关于插槽的详解

一、默认插槽

1、代码演示

通过上述代码，我们至少了解以下2点：
1.插槽里可以有默认内容，
2.默认插槽，组件的内容会全部替换到插槽中
2.父组件的数据也可以显示到子组件中（数据的作用域，后面作用域插槽会用到）

2、语法

定义插槽：<slot>插槽的默认内容</slot>

使用插槽：<组件> 内容全部替换到插槽中 </组件>

二、具名插槽

1、代码演示

具名插槽：简单理解，就是为每个<slot>进行命名，以进行区分。
注意：默认插槽也是有name的，name='default'

2、语法

定义插槽：<slot name="one"></slot>

使用插槽：<template v-slot:one> <div>{{ msg }}</div> </template>

插槽简写：<template #one> <div>{{ msg }}</div> </template>

3、动态插槽名

动态插槽名：
现在定义的插槽名都是固定写死的，Vue也支持将插槽名定义为变量。

定义插槽：<slot :name="name"></slot>

使用插槽：<template #[name]> <div>动态插槽名</div> </template>

三、作用域插槽

1、渲染作用域

渲染作用域：
父级模板里的所有内容都是在父级作用域中编译的
子模板里的所有内容都是在子作用域中编译的

因此也产生了一个问题：
假设第一个场景，需要你写一个商品卡片组件，并通过循环去展示多个卡片，
并且要求能响应每个卡片上的点击事件而跳转到商品详情页，你会怎么写？

我会使用如下的处理方式，

• 首先将商品卡片写成一个组件card.vue，
• 在cardList.vue中用一个v-for来处理商品卡片列表的展示。
• card.vue组件通过$emit向父组件传递cardClick事件，并携带商品数据，
• 父组件即可在onClick方法中得到数据，进行业务处理，
• 这样便完成了一个基本的由子到父的数据传递。

// cardList.vue
<template>
  <div class="card">
    <Card v-for="item in cardData" :key="item" @cardClick="onClick()"></Card>
  </div>
</template>


// card.vue
<template>
  <div class="div" @click="onClick()">卡片</div>
</template>
<script>
export default {
  methods: {
    onClick () {
      this.$emit('cardClick')
    }
  }
}
</script>

如果再往上抽象一下呢？
比如有多个运营栏目，像淘宝首页有“有好货”，“爱逛街”这样两个栏目，每个栏目下都需要有一个商品卡片列表，那么商品卡片列表cardList.vue就要抽成组件了。而这个包含多个运营栏目的vue组件我假设它叫finalList.vue，在其中通过v-for调用了cardList.vue组件。

注意：
需求来了—>我希望把点击商品卡片的业务放在finalList.vue中处理。要如何处理呢？

方法1：

• 商品按钮点击时，
• card.vue组件用$emit通知cardList.vue，
• cardList.vue继续用$emit往上抛，通知finalList.vue
• finalList.vue用事件接收处理。

这样做完全没有问题，但是显得子组件很不纯粹，跟业务都扯上关系了。

2、作用域插槽（实战应用）

那么如何优雅地解决上面的问题呢？这个时候，作用域插槽真正派上用场了。

我们先看下通过作用域插槽是如何解决上面问题的。

（1）finalList.vue

// src\views\06slot\finalList.vue
<template>
  <div>
    <div v-for="item in '123'" :key="item">
      <div style="text-align: left;">第{{ item }}个</div>
      <CardList :cardData="cardData" class="cardlist">
        <template v-slot="scope">
          <Card :cardObj="scope.row" @click.native="cardClick(scope.row)" class="card"></Card>
        </template>
      </CardList>
    </div>
  </div>
</template>

<script>
import Card from './card.vue'
import CardList from './cardList.vue'
export default {
  components: {
    Card,
    CardList
  },
  data () {
    return {
      cardData: [
        { name: 'zs', age: 18 },
        { name: 'ls', age: 19 }
      ]
    }
  },
  methods: {
    cardClick (row) {
      console.log('卡片点击了：' + row.name + '--' + row.age)
    }
  }
}
</script>

<style scoped>
.cardlist {
  display: flex;
}
.card {
  margin: 10px 20px;

}
</style>

（2）cardList.vue

// src\views\06slot\cardList.vue
<template>
  <div>
    <div v-for="(item, index) in cardData" :key="index">
      <slot :row="item"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cardData: {
      type: Array
    }
  }
}
</script>
<style  scoped>
</style>

（3）card.vue

// src\views\06slot\card.vue
<template>
  <div class="div">
    <div>{{ cardObj.name }}</div>
    <div>{{ cardObj.age }}</div>
  </div>
</template>

<script>
export default {
  props: {
    cardObj: {
      type: Object,
      default: () => { }
    }
  }
}
</script>
<style  scoped>
.div {
  width: 100px;
  height: 100px;
  background-color: pink;
}
</style>

（4）最终效果

小结

关于作用域插槽：
简单理解：作用域插槽就是简化子组件通过$emit向父组件多层传递数据的另一种表现
适用的场景：至少是包含三级以上的组件层级，是一种优秀的组件化方案！

3、简单应用demo

• 父组件访问子组件的数据：
  • 父组件获取组件slot属性：v-slot="slotProps"，
  • 子组件将数据绑定到动态属性中：<slot :item="item"></slot>
• 按照父组件期望的形式进行数据展示：
  • 子组件中定义slot插槽：<slot :item="item" :index="index"></slot>
  • 父组件通过插槽的方式替换子组件的插槽内容
    

四、插槽的多层嵌套

1、需求

A、B、C三个组件，A组件插槽的内容传给B组件，B组件再传递给C组件。

2、代码演示

// src\views\06slot\parent.vue
<template>
  <div>
    <Children1>
      <template v-slot:one>
        <div>根节点信息</div>
      </template>
    </Children1>
  </div>
</template>

// src\views\06slot\children1.vue
<template>
  <div>
    <div>children1</div>
    <Children2>
      <slot name="one" slot="two"></slot>
    </Children2>
  </div>
</template>

// src\views\06slot\children2.vue
<template>
  <div>
    <div>children2</div>
    <slot name="two"></slot>
  </div>
</template>

3、代码效果

4、核心点

1. A组件用v-slot:one将内容传递给B组件
2. B组件用name="one"接收插槽的内容，并通过 slot="two"将内容传递个C组件。即：<slot name="one" slot="two"></slot>
3. C组件用<slot name="two"></slot>接收A组件的内容