作用域插槽-自定义子组件

通俗易懂的作用域插槽详解，使用下面代码，就能搞明白

通俗含义：就是父组件想要在引入子组件的位置展示数据，父组件决定样式，子组件接收并传回数据，提供一个展示数据样式的位置。

父组件ScopeSlotTest.vue

<template>
  <div>
    <h2>效果一: 显示TODO列表时, 已完成的TODO为绿色</h2>
    <!-- todos，用于向子组件传值 -->
    <List :todos="todos">
        <!-- 书写template,todo用于接收子组件传过来的值，动态数据使用“：” -->
        <template slot-scope="todo">
          <span :style="{color:todo.todo.isComplete?'green':'black'}">{{todo.todo.text}}</span>
        </template>
    </List>
    <hr>
    <h2>效果二: 显示TODO列表时, 带序号, TODO的颜色为蓝绿搭配</h2>
    <List1 :data="todos">
         <template slot-scope="{row,index}">
               <h1 :style="{color:row.isComplete?'green':'hotpink'}">索引值{{index}}---------{{row.text}}</h1>
         </template>
    </List1>
  </div>
</template>


<script type="text/ecmascript-6">
  //子组件
  import List from './List'
  import List1 from './List1'
  export default {
    name: 'ScopeSlotTest',
    components: {
      List,
      List1
    },
    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},
        ]
      }
    },


   
  }
</script>

子组件List.vue

<template>
  <ul>
    <li v-for="(todo,index) in todos" :key="index">
       <!-- 数据来源于父亲：但是子组件决定不了结构与外网,todo用于向父组件传值-->
       <slot :todo="todo"></slot>
    </li>
  </ul>
</template>


<script>
export default {
  name: 'List',
  // 用于接收父组件传来的值
  props: {
  //Array用于指定数据类型
    todos: Array
  }
}
</script>

子组件List1.vue

<template>
  <ul>
    <li v-for="(todo,index) in data" :key="index">
      <!-- 子组件占位，父组件决定写什么样式，数据来自于父组件，带索引的数据展示方式 -->
       <slot :row="todo" :index="index "></slot>
    </li>
  </ul>
</template>


<script>
export default {
  name: 'List1',
  props: {
    data: Array
  }
}
</script>