vue插槽的使用

100 阅读 0 评论 66 点赞

我是靠谱客的博主寂寞滑板，这篇文章主要介绍vue插槽的使用，现在分享给大家，希望可以做个参考。

子组件slot:

Son.vue

复制代码

1
2
3
4
5
6
7
<template>
  <div>
    <slot>默认显示内容</slot>
    <slot name="nameSlot">具名插槽的用法</slot>
  </div>
</template>

父组件调用：

v-slot 的别名是#

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
    <son-slot>
      <template v-slot:nameSlot> My Image’s Title </template>
      <h2>ccc</h2>
      <h2>sss</h2>
    </son-slot>
</template>
<script>
import sonSlot from '@/components/Son.vue'
export default {
  components: {
    sonSlot
  }
}
</script>