What are components?
Component is one of the most powerful features of Vue.js. Components can extend HTML elements and encapsulate reusable code. At a higher level, components are custom elements, and Vue.js' compiler adds special features to it. In some cases, components can also be in the form of native HTML elements, extended with the is feature.
Slot Distribution Content
① Overview:
Simply put, if the parent component needs to put some DOMs in the child component, then these DOMs are displayed, not displayed, where they are displayed, and how they are displayed, which is the responsibility of slot distribution.
② By default
The contents of the parent component that is enclosed inside the child component are not displayed.
For example code:
<div id="app"> <children> <span>12345</span> <!--The line above will not be displayed--> </children> </div> <script> var vm = new Vue({ el: '#app', components: { children: { //This has no return value, and the template will not continue to be distributed: "<button>To clarify the scope of action, use the button tag</button>" } } }); </script>The display content is a button button, which does not contain the content in the span tag;
③Single slot
Simply put, if you only use this tag, you can place the parent component in the content of the child component and place it wants it to display.
<div id="app"> <children> <span>12345</span> <!--The line above will not be displayed--> </children> </div> <script> var vm = new Vue({ el: '#app', components: { children: { //This has no return value, and the template will not continue to be distributed: "<button><slot></slot>In order to clarify the scope of action, use the button tag</button>" } } }); </script>For example, if you write this, the result is:
<button><span>12345</span>To clarify the scope of action, use the button tag</button>
That is, the contents of the parent component placed in the child component are inserted into the <slot></slot> position of the child component;
Note that even if there are multiple tags, they will be inserted together, which is equivalent to replacing the <slot></slot> tag with the tag placed in the child component.
④ Named slot
Put different html tags placed in subcomponents in different locations
The parent component adds the slot=”name” attribute to the tag to be distributed
The child component adds the name=”name name” attribute in the slot tag of the corresponding distribution location, and then puts the corresponding tag in the corresponding location.
Sample code:
<div id="app"> <children> <span slot="first">12345</span> <span slot="second">56789</span> <!--The line above will not be displayed--> </children> </div> <script> var vm = new Vue({ el: '#app', components: { children: { //This has no return value, and the template will not continue to be distributed: "<button><slot name='first'></slot>In order to clarify the scope of action, <slot name='second'></slot>So use the button tag</button>" } } }); </script>The result is displayed as: (For the convenience of viewing, the line break has been manually adjusted)
<button><span slot="first">12345</span>To clarify the scope of action, <span slot="second">56789</span>so use the button tag</button>
⑤Scope of distribution content:
The scope of the distributed content is determined based on the template where it is located. For example, the above tag is controlled by the parent component's template (although it is included by the child tag of the child component, but since it is not in the template attribute of the child component, it does not belong to the child component), it is controlled by the parent component.
Sample code:
<div id="app"> <children> <span slot="first" @click="tobeknow">12345</span> <span slot="second">56789</span> <!--The line above will not be displayed--> </children> </div> <script> var vm = new Vue({ el: '#app', methods: { tobeknow: function () { console.log("It is the parent's method"); } }, components: { children: { //This has no return value, and template will not continue to be distributed: "<button><slot name='first'></slot>In order to clarify the scope of action, <slot name='second'></slot>so use the button tag</button>" } } }); </script>When the area of text 12345 is clicked (rather than buttons all), the tobeknow method of the parent component is triggered.
But when clicking on other areas, there is no effect.
The official tutorial says this:
The content of the parent component template is compiled within the scope of the parent component; the content of the child component template is compiled within the scope of the child component
⑥ Tips when there is no content distributed:
If the parent component does not place a tag in the child component, or the parent component places a tag in the child component, but has a slot attribute, and the child component does not have a tag for the slot attribute.
Then, the slot tag of the child component will not play any role.
Unless there is content in the slot tag, the content in the slot tag will be displayed when there is no content distributed.
As in the example code:
<div id="app"> <children> <span slot="first">【12345】</span> <!--The line above will not be displayed--> </children> </div> <script> var vm = new Vue({ el: '#app', components: { children: { //This has no return value, and the template will not continue to be distributed: "<div><slot name='first'><button>【If there is no content, it will show me 1】</button></slot>In order to clarify the scope of action, <slot name='last'><button>【If there is no content, it will show me 2】</button></slot>So use the button tag</div>" } } }); </script>illustrate:
【1】The slot tag with name='first' is replaced by the tag corresponding to the parent component (the content inside the slot tag is discarded);
【2】The slot tag of name='last', because there is no corresponding content, the content inside the slot tag will be displayed.
⑦ If you want to control the properties of the root tag of the subcomponent
[1] First of all, since the template tag belongs to the parent component, it is not possible to bind the child component's instructions to the template tag (because it belongs to the parent component);
[2] If you need to control whether the child component is displayed (such as v-if or v-show) through the parent component, then this directive obviously belongs to the parent component (such as placed under the data of the parent component). Tags can be written on the template of the child component.
As code:
<div id="app"> <button @click="toshow">Click to let the child component display</button> <children v-if="abc"> </children> </div> <script> var vm = new Vue({ el: '#app', data: { abc: false }, methods: { toshow: function () { this.abc = !this.abc; } }, components: { children: { //This has no return value, template: "<div>This is a child component</div>" } } }); </script>illustrate:
Control whether the child component is displayed through the parent component (click the button to switch the value of the v-if instruction).
[3] If you need to control whether the child component is displayed (for example, let it hide), then this instruction obviously belongs to the child component (the value will be placed under the data attribute of the child component), then it cannot be written as above, but must be placed in the root label of the child component.
<div id="app"> <button @click="toshow">Click to let the child component display</button> <children> <span slot="first">【12345】</span> <!--The line above will not be displayed--> </children> </div> <script> var vm = new Vue({ el: '#app', methods: { toshow: function () { this.$children[0].tohidden = true; } }, components: { children: { //This has no return value, and the template will not continue to be distributed: "<div v-if='tohidden' @click='tohide'>This is the child component</div>", data: function () { return { tohidden: true } }, methods: { tohide: function () { this.tohidden = !this.tohidden; } } } } } } }); </script>illustrate:
Clicking on a child component will make the child component disappear;
Click the button of the parent component to redisplay the child component by changing the tohidden property of the child component.
The instructions of the child component are bound to the child component's template (this can be called);
The above is a detailed explanation of the slot content distribution example of the 11th Vuejs component introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!