作用域插槽

子组件

子组件中拿到传递过来的数组进行遍历，用slot传回父组件

<template>
  <div>
    <h1>作用域插槽</h1>

    <!-- 如果子组件进行布局控制需要写很多条件判断，而且还不会写全，所以在子组件中进行布局控制不合理 -->
    <ul>列表显示
        <li v-for="(todo,index) in todos" :key="todo.id">
            <slot :row="todo" :index="index"></slot>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    name:"List",
    props:["todos"]
}
</script>

<style>

</style>

父组件

1.父组件传递数组到子组件，子组件接收数组，父组件不会进行循环，子组件接收数组进行循环

2.子组件中接收数组，所以一定是子组件循环遍历

3.<slot :row="todo" :index="index"></slot>会把内容传到父组件中

4.v-slot拿到的是子组件传过来的对象，:row="todo" :index="index"的内容就是slotScope，传过来是对象所以可以解构

5.父组件拿到下标和对象可以任意布局

<template>
  <!-- 在父组件中就对布局进行操作控制，可以进行任意界面设置 -->
  <!-- 1.父组件传递数组到子组件，子组件接收数组，父组件不会进行循环，子组件接收数组进行循环 -->
  <!-- 2.子组件中接收数组，所以一定是子组件循环遍历 -->
  <!-- 3.<slot :row="todo" :index="index"></slot>会把内容传到父组件中 -->
  <!-- 4.v-slot拿到的是子组件传过来的对象，:row="todo" :index="index"的内容就是slotScope -->
  <!-- 传过来是对象所以可以解构 -->
  <!-- 5.父组件拿到下标和对象可以任意布局 -->
  <List :todos="todos">
    <!-- <template v-slot="slotScope">{{slotScope}}</template> -->
    <!-- <template v-slot="{row,index}">{{row}}{{index}}</template> -->
    <template v-slot="{row,index}">{{row.id}}  {{row.text}}  {{index}}</template>
  </List>
</template>

<script>
import List from "@/components/List"
export default {
  data() {
    return {
      todos: [
        { id: 1, text: "学习slot", isComplete: false },
        { id: 2, text: "slot的默认值", isComplete: true },
        { id: 3, text: "默认的slot", isComplete: false },
        { id: 4, text: "作用域插槽", isComplete: false },
      ],
    };
  },
  components:{
    List
  }
};
</script>

<style>
</style>