slot插槽分发

 1 具名slot
 2 
 3 <slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素
 4 
 5 
 6 var childNode = {
 7  template: `
 8  <div class="child">
 9  <p>子组件</p>
10  <slot name="my-header">头部默认值</slot>
11  <slot name="my-body">主体默认值</slot>
12  <slot name="my-footer">尾部默认值</slot>
13  </div>
14  `,
15 };
16 
17 var parentNode = {
18  template: `
19  <div class="parent">
20  <p>父组件</p>
21  <child>
22   <p slot="my-header">我是头部</p>
23   <p slot="my-footer">我是尾部</p>
24  </child>
25  </div>
26  `,
27  components: {
28  ‘child‘: childNode
29  },
30 };