Vue插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示。

父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签

1.使用

（1）如果没给值，走默认值

<template>
<div id="comC">
	 C组件
    <!-- 插槽 -->
    <slot>default</slot>
</div>
</template>

<template>
  <div id="App">
    <v-comC></v-comC>
  </div>
</template>

（2）给值

<template>
<div id="comC">
	 C组件
    <!-- 插槽 -->
    <slot></slot>
</div>
</template>

<template>
  <div id="App">
    <!-- 插槽：组件内容区域写内容 -->
    <!-- 可以写内容、标签、组件 -->
    <v-comC>
      <h3>标题</h3>
      我是插槽内容
    </v-comC>
  </div>
</template>

可以看到插槽位置已经被直接替换：

如果我们不放入插槽，

<template>
<div id="comC">
    C组件
    <br>
    <!-- 插槽 -->
    <!-- <slot>default</slot> -->
</div>
</template>