slot插槽分发

https://www.cnblogs.com/qq735675958/p/8377761.html

具名slot

<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素


var childNode = {
 template: `
 <div class="child">
 <p>子组件</p>
 <slot name="my-header">头部默认值</slot>
 <slot name="my-body">主体默认值</slot>
 <slot name="my-footer">尾部默认值</slot>
 </div>
 `,
};

var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p slot="my-header">我是头部</p>
  <p slot="my-footer">我是尾部</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};ps:父组件中利用到的部分就会优先展示父级的信息，否则默认展示子组件的信息；

// 子组件 --slot常用的方式
<template>
  <div class="slot-child">
　　　//在子组件中添加slot标签
      <slot></slot>
      我是slot的子组件
  </div>
</template>

<script>
export default {
  name: 'slotChild',
  data () {
    return {
      
    }
  }
}
</script>

此时你将这个组件引入到父组件之后，你就可以在
<slot-child>
    <div>我就可以在组件内部填充，如果子组件内没写slot，是无法在父页面中展示dom的。<div/>  ps:子组件slot的位置就是插槽的位置。
<slot-child/>