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

Posted 2021-10-21 zico233

版本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>