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的使用方法,就这么简单,完结撒花~

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

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




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



理解关键点:

slot-scope="slotProps"

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

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

你可能感兴趣的:(vue)