vue slot 插槽隔代传数据(vue2.6)

版本2.6以上版本写法

父组件

      <test1><template v-slot:test>我是传给子组件</template><template v-slot:content>我是传给孙子组件</template></test1>

 子组件

<template><div><slot name="test"></slot><test2><template #content>子代<slot name="content"></slot></template></test2></div>
</template>

孙组件

<template><div>我是孙级组件<slot name="content"></slot></div>
</template>

v-slot 可以写成# 简写  比如： v-slot: test  与 #test 一样

插槽作用域： 父组件能访问子组件数据

普通写法：

 <template v-slot:default="slotProps">{
   { slotProps.user.firstName }}</template>

解构写法

 <template v-slot:default="{user}">{
   { user.firstName }}</template>

具名插槽写法：

1.父组件

  <template v-slot:content="{user}" >{
   { user.firstName }}</template>

2.子组件

   <slot name="content" :user="user"></slot>