Detailed explanation of the steps for slot distribution content

This time I will bring you a detailed explanation of the steps of slot distribution content. What are the precautions for slot distribution content. The following is a practical case, let’s take a look.

1. What is slot

When using components, we often have to combine them like this:

<app>
 <app-header></app-header>
 <app-footer></app-footer>
</app>

When When you need to use components in combination and mix the content of the parent component and the template of the child component, slots will be used. This process is called content distribution (transclusion).

Note two points:

1. The component does not know what its mount point will contain. The content of the mount point is determined by the parent component of .

2. The component most likely has its own template.

Props transfer data, events trigger events and slot content distribution constitute the three API sources of the Vue component. No matter how complex the component is, it is also composed of these three parts.

2. Scope

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

The message here is a slot, but it is bound to the data of the parent component, not the component The data of .

The content of the parent component template is compiled within the scope of the parent component, and the content of the child component template is compiled within the scope of the child component. For example:

   <p id="app15">
      <child-component v-show="showChild"></child-component>
    </p>
Vue.component('child-component',{
  template: '<p>子组件</p>'
});
var app15 = new Vue({
  el: '#app15',
  data: {
    showChild: true
  }
});

The state hereshowChild is bound to the data of the parent component. If you want to bind it to the child component, it should be:

    <p id="app15">
      <child-component></child-component>
    </p>
Vue.component('child-component',{
  template: '<p v-show="showChild">子组件</p>',
  data: function(){
    return {
      showChild: true
    }
  }
});

Therefore, The content distributed by slot is scoped on the parent component.

3. Slot usage

3.1 Single slot

Use special slots in subcomponents The element can open a slot (slot) for this child component. In the parent component template, all content inserted in the child component tag will replace the child component's tag and its content.

 <p id="app16">
      <my-component16>
        <p>分发的内容</p>
        <p>更多分发的内容</p>
      </my-component16>
    </p>
Vue.component('my-component16',{
  template: '<p>' +
        '<slot><p>如果父组件没有插入内容，我将作为默认出现＜</p></slot>' +　　　　//预留的slot插槽
       '</p>'
});
var app16 = new Vue({
  el: '#app16'
});

The rendering result is:

<p id=”app16”>
  <p>
    <p>分发的内容<p>
    <p>更多分发的内容<p>
  </p>
</p>

A element is defined in the template of the child component child-component , and a

is used as the default content , when the parent component does not use slot, this default text will be rendered; if slot is written, the entire will be replaced.

3.2 Named slot

After specifying a name to the element, multiple contents can be distributed, and the named slot can coexist with a single slot.

  <p id="app17">
      <my-component17>
        <h3 slot="header">标题</h3>
        <p>正文内容</p>
        <p>更多正文内容</p>
        <h3 slot="footer">底部信息</h3>
      </my-component17>
    </p>
Vue.component('my-component17',{
  template: '<p class="container">' +
         '<p class="header">' +
          '<slot name="header"></slot>' +
         '</p>' +
         '<p class="main">' +
          '<slot></slot>' +
         '</p>'+
         '<p class="footer">' +
          '<slot name="footer"></slot>' +
         '</p>'+
       '</p>'
});
var app17 = new Vue({
  el: '#app17'
});

Rendering results are:

 <p id="app17">
        <p class="container">
          <p class="header">
            <h3>标题</h3></p>
          <p class="main"> 
            <p>正文内容</p> 
            <p>更多正文内容</p> 
          </p>
          <p class="footer">
            <h3>底部信息</h3>
          </p>
        </p>
      </p>

3 elements of

If the default anonymous slot is not specified, the redundant content fragments in the parent component will be discarded.

4. Scope slot

The scope slot is a special slot that uses a reusable template to replace it. Rendering elements.

Look at an example: ​

 <p id="app18">
      <my-component18>
        <template scope="props">
          <p>来自父组件的内容</p>
          <p>{{props.msg}}</p>
        </template>
      </my-component18>
    </p>
Vue.component('my-component18',{
  template: '<p class="container"><slot msg="来自子组件的内容"></slot></p>'
});
var app18 = new Vue({
  el: '#app18'
});

Observe the template of the subcomponent. On the element, there is a writing method similar to props to pass data to the component. msg="xxx", will The data is passed to the slot.

The parent component uses the

Let’s take a look at the usage of slot in the Vue component

The main purpose is to make the component more scalable.

1. Use anonymous slot

2. Add a name to the slot

If you don’t add any tags to the component with slot, nothing will be displayed in the slot.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!

Recommended reading:

Detailed explanation of the use of webpack automatic refresh

Detailed explanation of the use of Angular entry components and declarative components

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