Vue的slot-scope（v-slot）的场景的个人理解

最新推荐文章于 2024-05-16 15:22:10 发布

凌儿~

最新推荐文章于 2024-05-16 15:22:10 发布

阅读量6.8k

点赞数 15

分类专栏：前端知识文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/rhcjqmm666/article/details/130243417

版权

前端知识专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue的插槽slot，分为3种

1. 匿名插槽(< slot > 作为我们想要插入内容的占位符)

2. 具名插槽(给插槽加入name属性就是具名插槽)

3. 作用域插槽(:text=“值” 子组件可向父组件传递信息)

前两种很好理解，无论就是子组件里定义一个slot占位符，父组件调用时，在slot对应的位置填充模板就好了。重点讲第三种，作用域插槽。

作用域插槽的慨念，文档却只有一句简单的描述

有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。

语言描述太抽象，我想象不到slot-scope的使用场景。

前言

介绍了写这篇文章的来由，接下来简述一下本文的脉络

先结合文档上todo-list的例子，来简单说明一下slot-scope的使用方式
会使用但不理解什么时候用，就没有什么意义，所以本文第二部分，谈一下个人对于其使用场景的理解

官方文档slot-scope的示例

下面是2个父子的vue组件，先解释一下2个组件做了什么事情

父组件仅仅是调用了子组件
子组件内部实现了一个todolist列表

我建议从数据流动的角度，理解插槽作用域的使用方式，（先学会怎么用，暂时不用理解为什么要这么用,使用场景是第二部分）

1.父组件传递了todos数组给子组件
2.子组件通过props接受了数组数据，这里应该没有任何问题
3.子组件拿到数组后v-for渲染列表，并且通过的方式，把数组内的每一个todo对象，传递给父组件
4.父组件通过slot-scope="slotProps"的方式，接受todo对象，之后就可以通过slotProps.todo.xxx的方式来使用了

所以数据的流动经历了

父组件传递todos数组给子组件
子组件遍历todos数组，把里面的todo对象传递给父组件
好啦，这就是slot-scope的使用方法，就这么简单，完结撒花~

我贴出全部代码，方便大家自己研究

父组件的源码，也就是调用者

<template>
  <todo-list :todos="todos">
    <template slot-scope="slotProps">
      <span v-if="slotProps.todo.isComplete">✓</span>
      <span>{{slotProps.todo.text}}</span>
    </template>
  </todo-list>
</template>

<script>
import todoList from './todoList'
export default {
  data () {
    return {
      todos: [
        {
          id: 0,
          text: 'ziwei0',
          isComplete: false
        },
        {
          text: 'ziwei1',
          id: 1,
          isComplete: true
        },
        {
          text: 'ziwei2',
          id: 2,
          isComplete: false
        },
        {
          text: 'ziwei3',
          id: 3,
          isComplete: false
        }
      ]
    }
  },

  components: {
    todoList
  },

}
</script>

子组件源码，也就是封装组件的人

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <slot :todo="todo">
      </slot>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    todos: {
      type: Array
    }
  }
}
</script>

slot-scope的使用场景的个人理解

想象一个场景：

当你要给同事封装一个列表组件，你就需要使用作用域插槽（注意是列表或者类似列表的组件）

你开发的这个列表组件要如何使用呢？

一般来说作为列表组件的调用者，你的同事先做ajax请求，拿到一个这样的数组

    todos: [
        {
          id: 0,
          text: 'ziwei0',
          isComplete: false
        },
        {
          text: 'ziwei1',
          id: 1,
          isComplete: true
        },
        {
          text: 'ziwei2',
          id: 2,
          isComplete: false
        },
        {
          text: 'ziwei3',
          id: 3,
          isComplete: false
        }
      ]

之后会把todso传递给列表组件吧，那么列表组件内部做什么事情呢？

列表内部肯定会v-for去帮你的同事渲染这个数组嘛。就类似element-ui里的table组件一样

问题的关键就在这里

列表组件的循环，是发生在组件内部的，所以通过 v-for=“todo in todos” ,列表组件很容易拿到每一项todo，但列表拿到数据没用呀，列表只是一个瓜皮，列表展示的布局和使用的参数是不固定的，所以你把数据交给子组件循环渲染是不行的，你需要在父组件来定义子组件的数据的展示效果。

那么你怎样才能把每一项的todo数据给传递出去呢？

你会发现没有办法！
无论是用$emit、vuex还是localStorage，可以考虑一下，会发现没有合适的时机，能让你把todo传递出去

所以为了应对这个场景下，发明了作用域插槽，列表组件可以通过< slot :todo=“todo”>传递todo出去

你的同事可以通过 slot-scope=“slotsProps”(v-slot=“slotProps”)拿到todo。

<template>
  <todo-list :todos="todos">
    <template slot-scope="slotProps"> // 就是这段代码
      <span v-if="slotProps.todo.isComplete">✓</span>
      <span>{{slotProps.todo.text}}</span>
    </template>
  </todo-list>
</template>

疑问1：一般不是我们传参数来调用组件吗？为什么组件还把数据传递回来？

的确，调用ui组件时一般是我们传递配置参数给他们来进行数据的展示。

但是存在一种情况，你传递的参数是不固定的，比如elemnt-ui的table组件，你把数组传递给table后，设置prop参数对应的字段名称，来展示对应row对象中名称的值。

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"//  <---就是这里
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>