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
2. The
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
<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 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 3.2 Named slot After specifying a name to the Rendering results are: 3 4. Scope slot The scope slot is a special slot that uses a reusable template to replace it. Render elements. Look at an example: Observe the template of the subcomponent. On the The element is used in the parent component and has a 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: child-component
, and a <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'
});
<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>
<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'
});
scope="props"
feature. The props here is just a temporary variable, just likev-for= ” item in items
Like the item inside, the data msg from the sub-component slot can be accessed through the temporary variable props in the template.
The above is the detailed content of vue+slot distributes content. For more information, please follow other related articles on the PHP Chinese website!