vue之slot-scope

程序员零花钱码上见

 

官方文档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对象传递给父组件

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

<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>

研究

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值