vue父组件插槽内容直接访问子组件的数据

1.slot 如何让插槽内容能够访问子组件中才有的数据

在下面父组件中是没发拿到item的值的

// 父组件 father.vue

  
  // 这里是拿不到item的，只有在todo-list组件内部才能拿到item
  {{ item }}


// 子组件 todo-list.vue
items = ['Feed a cat', 'Buy milk']
 

   

     {{ item }}
   
 

可以通过slot解决 父组件获取到子组件里的值

// 子组件 todo-list.vue
items = ['Feed a cat', 'Buy milk']
 

   

   // 这里可以根据自己的需要将任意数量的 attribute 绑定到 slot 上
    
   
 

绑定在 元素上的 attribute 被称为插槽 prop。现在，在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

// 父组件

// slotProps这个名字可以任意
 


// 等价于

  
  {{ slotProps.item }}

 
// 也等价于

  
  {{ slotProps.item }}


// 也可以这样 {item} 结构赋值

  
  {{ item }}