vue slot使用

Posted 2022-02-06 zhangyaran

定义一个父组件

 1.如果指定了 slot="slotA"

<template>
  <div class="home">
    我是父组件
    <Child>
      <p slot="slotA">hello world</p>
    </Child>
  </div>
</template>

 

<template>
  <div class="child">
    <p>我是子组件</p>
    <slot name="slotA">slot1</slot>
  </div>
</template>

 

 

2.如果没有指定slot，页面一样会显示

<template>
  <div class="home">
    我是父组件
    <Child>
      <p>hello world</p>
    </Child>
  </div>
</template>

<template>
  <div class="child">
    <p>我是子组件</p>
    <slot>slot1</slot>
  </div>
</template>

 

 

如果存在多个slot用第一种方法 指定name

父组件如果没有指定name，子组件却定义了name，是找不到对应的slot