vue+slot distributes content

This time I will bring you the vue slot distribution content. What are the precautions for vue 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 passing data, events triggering 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 showChild here 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 has the function The domain is 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

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 not If you add any label to a component with a 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:

Using vue2.0 boostrap in the case

node token for user verification

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