作用域插槽

插槽可以实现父子组件通信(通信的结构)
默认插槽
具名插槽
作用域插槽:子组件的数据来源于父组件,子组件是决定不了自身结构与外观的

直接上代码！！

父组件：

<template>
  <div>
    <h2>效果一: 显示TODO列表时, 已完成的TODO为绿色</h2>
    <hr>
    <h2>效果二: 显示TODO列表时, 带序号, TODO的颜色为蓝绿搭配</h2>
  </div>
</template>

<script type="text/ecmascript-6">
  //子组件
  import List from './List'
  import List1 from './List1'
  export default {
    name: 'ScopeSlotTest',
    data () {
      return {
        todos: [
          {id: 1, text: 'AAA', isComplete: false},
          {id: 2, text: 'BBB', isComplete: true},
          {id: 3, text: 'CCC', isComplete: false},
          {id: 4, text: 'DDD', isComplete: false},
        ]
      }
    },
    components: {
      List,
      List1 
    }
  }
</script>

目前效果：

父组件给子组件传递数据

父组件：

子组件接收父组件传递的数据,通过props接收,然后在进行遍历出来使用:

子组件List

效果：

作用域插槽的使用

作用域插槽:子组件的数据来源于父组件,子组件是决定不了自身结构与外观的

需求：效果一:显示TODO列表时,已完成的TODO为绿色

子组件List

父组件接收作用域插槽回传的数据

父组件：

效果：

作用域插槽:
子组件:数据来源于父组件,子组件再把数据回传给父组件,父组件接收到回传的数据后,再给子组件传结构和样式

效果二:显示TODO列表时,带序号,TODO的颜色为蓝绿搭配

第二个子组件List1

父组件：

效果：

作用域插槽就是这样的啦！！