Vue 插槽（槽）系列说明--默认插槽的使用

3.1、语法

<slot></slot>

3.2、示例

在子组件中定义了一个默认插槽：

<template>
  <div class="about">
    <h1>This is an Children page</h1>
    <!-- 定义一个默认插槽 -->
    <slot></slot>
  </div>
</template>

在开发中我们经常使用到组件之间的传值，但很多情况涉及到的都是数据属性的传值，现在如果是这种情况：

<template>
  <div class="about">
    <h1>This is an Parent page</h1>
    <children>
      <!-- 一个p标签的dom结构 -->
      <p>子组件标签之间</p>
    </children>
  </div>
</template>

<script>
import Children from './Children.vue'
export default {
  components: {
    Children
  },
  data () {
    return {
    }
  }
}
</script>

如果子组件中没有使用插槽的情况下：

<template>
  <div class="about">
    <h1>This is an Children page</h1>
  </div>
</template>

浏览器中的页面，父组件中的p标签的内容是不会还给子组件的。

这时候，想让父组件定义的p标签传给子组件并显示，可以在子组件中定义一个默认插槽

<template>
  <div class="about">
    <h1>This is an Children page</h1>
    <!-- 定义一个默认插槽 -->
    <slot></slot>
  </div>
</template>

在子组件中，你可以定义多个默认插槽，并在子组件中决定这些默认插槽的位置，父组件要插入的内容，都会被填充到这些默认的插槽中：

<template>
  <div class="about">
    <h1>This is an Children page</h1>
    <!-- 定义一个默认插槽 -->
    <slot></slot>
    <slot></slot>
  </div>
</template>

当然，父组件定义要插入到子组件插槽的内容，并不一定是dom结构类型，也可以是一个组件，也可以是普通的数据结构，只要子组件有定义插槽，就会把内容填充进去。