Vue内容分发slot(全面解析)

具名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
 },
};

仍然可以有一个匿名 slot，它是默认 slot，作为找不到匹配的内容片段的备用插槽。匿名slot只能作为没有slot属性的元素的插槽，有slot属性的元素如果没有配置slot，则会被抛弃

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

var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p slot="my-body">我是主体</p>
  <p>我是其他内容</p>
  <p slot="my-footer">我是尾部</p>
 </child>
 </div>
 `,
 components: {
 'child': childNode
 },
};

<p slot=”my-body”>插入<slot name=”my-body”>中，<p>我是其他内容</p>插入<slot>中，而<p slot=”my-footer”>被丢弃

如果没有默认的 slot，这些找不到匹配的内容片段也将被抛弃

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

var parentNode = {
 template: `
 <div class="parent">
 <p>父组件</p>
 <child>
  <p slot="my-body">我是主体</p>								 
 3/4   首页 上一页 1 2 3 4 下一页 尾页