By

文章目录

Slot 是一种父组件与子组件通信的一种方式

1
2
3
4
5
6
7
8
9
10
11
// 父组件
<div>
  <SayHello>
    world! // 可以是组件 和可以是简单的文本
  </SayHello>
</div>
// 子组件 SayHello.vue
<span>
  Hello,
  <slot></slot> // 由父类决定是啥
</span>

slot name

1
2
3
4
5
6
7
8
9
10
// 父组件
<SayHello name="world">
  <a slot="link" href="https://www.google.com">link</a>
  <p slot="page">Text page</p>
</SayHello>
// 子组件 SayHello.vue
<div>
  Hello, {{ name }}!<slot name="page" />
  <slot name="link" />
</div>

文章目录