欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

作用域插槽

最编程 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标签进行图片的展示