Vue slot属性

假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

//父组件
<template>
    <div>
      <div>我是父组件</div>
      <child>
        <p>想显示在子组件能否显示</p>
      </child>
    </div>
</template>

<script>
  import child from './child';
  export default {
    components: {
      child
    }
  }
</script>

<style>
</style>

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

<script>
</script>

<style>
</style>

//显示效果
我是父组件
我是子组件

接下来，要在显示父组件中p标签的内容

修改子组件：child.vue
<template>
  <div>
      <div>我是子组件</div>
      <p>测试slot</p>
      <slot></slot>
  </div>
</template>

<script>
</script>

<style>
</style>

//运行显示效果
我是父组件
我是子组件
测试slot
想显示在子组件能否显示

二、具名slot

将放在子组件里的不同html标签放在不同的位置
子组件在对应分发的位置的slot标签里，添加<slot name='name名' >内容</slot>属性，
父组件在要显示的标签里添加 slot='name名'属性，比如要在p标签中显示子组件对应的dom，<p slot='name名'></p>
然后就会将对应的标签放在对应的位置了。该slot标签没有内容，会显示子组件中该slot标签内的内容。

//子组件
<template>
    <div>
        <h3>我是子组件</h3>
        <p><slot name="header">父组件中没header的时候会显示</slot></p>
        <p><slot name="footer">父组件中没footer的时候会显示</slot></p>
    </div>
</template

//父组件
<template>
  <div>
      <v-child>
          <p>hello</p>
          <h3 slot="header">header</h3>
      </v-child>
  </div>
</template>

//显示结果：
我是子组件
header
父组件中没footer的时候会显示