作用域插槽
最编程
2024-03-30 10:25:49
...
子组件的数据是父组件给的
子组件决定不了结构与外观
子组件要把数据进行回传给父组件
父组件再给子组件传结构
所以相当于给子组件留了一个坑,父组件往坑里面填东西。
/*父组件
/*子组件
注意:
//定义变量todo 把每一项item传给父组件
//这是作用域插槽写法 不是props
<slot :todo="item"></slot>
//===================================
//当子组件要给父组件传递多个数据时
<slot :todo="item" :$index="index"></slot>
//父组件接收
//接收到的数据是一个对象 进行解构
<template slot-scope="{todo,$index}">
<span>{{$index}}</span>
</template>
作用域插槽+elementui
相当于是在父组件页面 el-table-column相当于是子组件标签 当接收到父组件传递过来的图片路径时无法以图片的格式进行显示 所以用到作用域插槽
slot-scope="{row,$index}" 接收的是子组件传递过来的每一项的数据row以及索引值$index (应该是elementui封装好的) 最终再用img标签进行图片的展示