用作用域slot父子传参

具体原理

我们在父组件里获取的信息,然后用:xxx = "数据";的方法传递给子组件

子组件用defineprops方法获取以后,渲染,然后再遍历的地方写一个slot

slot标签通过$

               <slot :$row="item">

               </slot>

传递

父组件用template标签的属性获取,比如v-slot='item'这种方法获取

父标签

​
<template>
    <div class="parent">
        <h1>爸爸。。。。。</h1>
     
        <button >james</button>
         这个是我从父组件传递给子组件的数组
        <SlotA :arrTodo="arrTodo">
            然后我们用这个v-slot方法获取子组件里循环的数据,
            <template v-slot="item">
                {{ item }}
            </template>
        </SlotA>
        
    </div>
</template>
<script setup lang="ts">
import SlotA from "./SlotA.vue"
import {onMounted, ref}  from "vue";
const arrTodo = ref([
    {id:1,title:"做饭",done:false},
    {id:1,title:"睡觉",done:false},
    {id:1,title:"1111",done:false},
    {id:1,title:"宿舍",done:true},
    {id:1,title:"不不不",done:true},
])
onMounted(()=>{
})
</script>
<style scoped>
   .parent{
      width: 500px;
      height: 500px;
      background: pink;
   }
</style>

​

子组件的代码

<template>
    <div class="parent">
        <h1>儿子。。。。。</h1>
        <p>这里是儿子</p>
          <slot>
            科比
          </slot>
        <button>james</button>
        <!-- <p>{{ arrTodo }}</p> -->
        <ul>
            <li   v-for="(item,index) in arrTodo" :key="index" >
                这里是方法的重点,我们获取以后,用:$row="item"方法把数据传递给父组件
               <slot :$row="item">
               </slot>
            </li>
        </ul>
    </div>
</template>
<script setup lang="ts">
用这个defineProps方法获取arrTodo数据,是自定义事件里获取的
defineProps(['arrTodo'])
import {onMounted, ref}  from "vue";
onMounted(()=>{ 
})
</script>
<style scoped>
   .parent{
      width: 500px;
      height: 500px;
      background: pink;
   }
</style>