1.作用域插槽也可以进行组件间的通信,当子组件不能决定组件的结构和样式的时候,就需要将父组件传递的数据以作用域插槽的形式回传给父组件,然后由父组件决定结构和样式。
<li v-for="item in todos" :key="item.id">
<!-- 子组件不能决定结构和样式,将每一项传递给父组件去决定 -->
<slot :todo="item"></slot>
</li>
子组件此处的 :todo是回传的名称,并不是props。
2.父组件接收回传的数据时,需要在template标签中进行接收
<template slot-scope="scope"></template>
3.小案例
父组件
<template>
<div>
<h2>1.展示TODO的每一项,完成的字体颜色为绿色。未完成的字体颜色为红色</h2>
<list :todos="todos">
<template slot-scope="scope">
<h3>子组件回传的数据:{
{ scope }}</h3>
<h3 :style="{ color: scope.todo.isCompleted ?