slot-scope用法及理解

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

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

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

• 1.父组件传递了todos数组给子组件
• 2.子组件通过props接受了数组数据，这里应该没有任何问题
• 3.子组件拿到数组后v-for渲染列表，并且通过 <slot :todo="todo">的方式，把数组内的每一个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="slotProps"

这个slotProps是自定义的一个名字，这个名字可以接收到来自子组件的值。

本篇文章节选转自https://segmentfault.com/a/1190000015884505