Vue content distribution slot

##Anonymous slot

When the child component template has only one slot without attributes, the entire content fragment of the parent component will be inserted into the DOM location where the slot is located, and the slot tag itself will be replaced

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot></slot>
  </p>
  `,
};

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>测试内容</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

## If there is more than 1 anonymous slot, vue will report an error

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot></slot>
    <slot></slot>
  </p>
  `,
};

[Default value]

<slot>

fallback content, otherwise known as the default value. Alternate content is compiled within the scope of the child component, and is displayed only when the host element is empty and there is no content to be inserted When the slot has a default value and the parent element is in When there is no content to be inserted, the default value

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot><p>我是默认值</p></slot>
  </p>
  `,
};
var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child></child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
    <slot><p>我是默认值</p></slot>
  </p>
  `,
};
var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>我是设置值</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

Named Slot

element can use a special attribute

to configure how content is distributed. Multiple slots can have different names. Named slot will match elements in the content fragment that have the corresponding slot attribute<pre class="brush:php;toolbar:false">var childNode = {   template: `  &lt;p class=&quot;child&quot;&gt;     &lt;p&gt;子组件&lt;/p&gt;     &lt;slot name=&quot;my-header&quot;&gt;头部默认值&lt;/slot&gt;     &lt;slot name=&quot;my-body&quot;&gt;主体默认值&lt;/slot&gt;     &lt;slot name=&quot;my-footer&quot;&gt;尾部默认值&lt;/slot&gt;   &lt;/p&gt;   `, };</pre>

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p slot="my-header">我是头部</p>
      <p slot="my-footer">我是尾部</p>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

default slot, as a backup slot if no matching content fragment is found. Anonymous slots can only be used as slots for elements without slot attributes. Elements with slot attributes will be discarded if they are not configured with slots

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

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

Insert into,

I am other content

is discarded

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

##

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

I am other content

are abandoned

作用域插槽

　　作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。

　　在子组件中，只需将数据传递到插槽，就像将 props 传递给组件一样

<p class="child">
  <slot text="hello from child"></slot></p>

　　在父级中，具有特殊属性 scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象

var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
      <slot xxx="hello from child"></slot>
  </p>
  `,
};
var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <template scope="props">
        <p>hello from parent</p>
        <p>{{ props.xxx }}</p>
      </template>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

　　如果渲染以上结果，得到的输出是

【列表组件】

　　作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项

var childNode = {
  template: `  <ul>
    <slot name="item" v-for="item in items" :text="item.text">默认值</slot>
  </ul>
  `,
  data(){
    return{
      items:[
        {id:1,text:'第1段'},
        {id:2,text:'第2段'},
        {id:3,text:'第3段'},
      ]
    }
  }
};

var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <template slot="item" scope="props">
        <li>{{ props.text }}</li>
      </template>
    </child>
  </p>
  `,
  components: {
    'child': childNode
  },
};

The above is the detailed content of Vue content distribution slot. For more information, please follow other related articles on the PHP Chinese website!