Vue content distribution slot

Previous words

In order for components to be composed, a way is needed to mix the content of the parent component with the child component's own template. This process is called Content Distribution (or "transclusion"). Vue implements a content distribution API, referring to the current draft web component specification, using the special <slot> element as the slot for the original content. This article will introduce in detail the Vue content distribution slot

Compilation scope

Before going deep into the content distribution API, first clarify in which scope the content is compiled. Assume that the template is

<child-component>
  {{ message }}
</child-component>

Should message be bound to the data of the parent component or to the data of the child component? The answer is parent components. Component scope simply means: the content of the parent component template is compiled in the parent component scope; the content of the child component template is compiled in the child component scope.

A common mistake is to try to bind a directive to a child component property/method within the parent component template:

<!-- 无效 -->
<child-component v-show="someChildProperty"></child-component>

AssumptionsomeChildProperty is a property of the child component, the above example will not work as expected. The parent component template should not know the state of the child component

If you want to bind a scoped directive to the root node of a component, you should do it on the component's own template:

Vue.component('child-component', {
  // 有效，因为是在正确的作用域内
  template: '<p v-show="someChildProperty">Child</p>',
  data: function () {
    return {
      someChildProperty: true
    }
  }
})

Similarly, distributed content is compiled in the parent scope

Discarded by default

Generally, if the child component template does not contain <slot>Socket, the content of the parent component will be discarded

##

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

<p id="example">
  <parent></parent></p><script src="https://unpkg.com/vue"></script><script>var childNode = {
  template: `  <p class="child">
    <p>子组件</p>
  </p>  `,
};var parentNode = {
  template: `  <p class="parent">
    <p>父组件</p>
    <child>
      <p>测试内容</p>
    </child>
  </p>  `,
  components: {    'child': childNode
  },
};// 创建根实例new Vue({
  el: '#example',
  components: {    'parent': parentNode
  }
})</script>

As shown in the figure below, the

test content

contained in is discarded

##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]

Initially in the

<slot>

tag Any content is considered

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

## is displayed. When the slot has a default value and the parent element is in < When there is content to be inserted in child>, the setting value is displayed

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

　The <slot>

element can use a special attribute

name

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

There can still be an anonymous slot, which is the

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

Insert into <slot>, and

is discarded

If there is no default slot, these matching content cannot be found Fragments will also be 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

and

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!