Logo

# Vue2教程 - 15 插槽

Vue 中的插槽（Slot）是一种组件间通信的技术，它允许父组件向子组件中插入 HTML 结构或组件。

使用场景，在不同的父组件中使用某个子组件的时候，想要动态的渲染子组件的内容。子组件的部分内容可以从父组件中“传递”到子组件进行显示。

# 15.1 插槽是什么

下面看一个例子

写一个子组件：ChildCom.vue

<template>
  <div>
      <div>我是子组件</div>
  </div>
</template>

<script>
  export default {
  }
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

写一个父组件：HomePage.vue。

在父组件中使用子组件 ChildCom。

<template>
    <div>
        <div>我是父组件</div>
        <ChildCom>
            <p>测试一下，把内容写在这里，看是否能否显示</p>
        </ChildCom>
    </div>
</template>

<script>
import ChildCom from '@/components/ChildCom';
export default {
    components: {
        ChildCom
    }
}
</script>

<style></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

运行代码，效果如下：

可以看到在父组件中，使用子组件的时候，在子组件标签中间添加的内容是看不见的。


那如果我想实现显示父标签中，子标签中间添加的内容，该怎么办？

内容未完......
查看完整内容 →

← 16-Vuex →