Detailed explanation of the steps for using slots to distribute content using vue components

This time I will bring you a detailed explanation of the steps for using vue components to distribute content using slots. What are the precautions for vue components using slots to distribute content? Here are practical cases, 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 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. Render 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 other related articles on the php Chinese website!

Recommended reading:

How to build a vue2.0 boostrap project

How to hot replace the webpack module

The above is the detailed content of Detailed explanation of the steps for using slots to distribute content using vue components. For more information, please follow other related articles on the PHP Chinese website!