组件传值-作用域插槽

在父组件中使用子组件中的内容

作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

举个例子

 

父组件：

<template>
  <div class="home">
    <h4>效果一：显示代办列表时，已完成的任务为绿色</h4>
    <Son :todolists="todolists"> <!-- 给子组件传递数据 -->
      <template slot-scope="item">
        <span :style="{backgroundColor:item.item.isComplete?'green':''}">父：{{item.item.text}}</span>
      </template>
    </Son> 
    <h4>效果二：显示代办列表时，带序号，代办列表为蓝绿搭配</h4>
    <Son1 :todolists="todolists"> <!-- 给子组件传递数据 -->
      <template slot-scope={item,$index}>
        <span :style="{backgroundColor:item.isComplete?'green':'blue'}">父：{{$index}}---{{item.text}}</span>
      </template>
    </Son1> 
  </div>
</template>

<script>
import Son from './Son.vue'
import Son1 from './Son1.vue'
export default {
  name: 'Father',
  components:{
    Son,
    Son1
  },
  data () {
    return {
      todolists:[
        {id:1,text:'安全管理电视电话会议',isComplete:false},
        {id:2,text:'部门小组生产计划',isComplete:false},
        {id:3,text:'编制计划任务分工表，分配任务',isComplete:true},
        {id:4,text:'遗留问题通报到组整改，检查整改成果',isComplete:false}
      ]
    }
  }
 }
</script>

子组件 Son

<template>
  <div class="about">
    子组件
    <ul>
      <li v-for="(todolist,index) in todolists" :key="index">
        子组件回传==>
        <slot :item="todolist"></slot> <!-- 作用域插槽 -->
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:{
    todolists:[]
  }
}
</script>

子组件Son1

<template>
  <div class="about">
    子组件
    <ul>
      <li v-for="(todolist,index) in todolists" :key="index">
        子组件回传==>
        <slot :item="todolist" :$index="index"></slot> <!-- 作用域插槽 -->
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:{
    todolists:[]
  }
}
</script>