This is the 18th day of my participation in the August Challenge

I. Scene requirements

< div id = "app" > < child content = "< p > hello < / p >" > < / child > < / div > Vue.com ponent (' child '{props: [' content'], the template: `<div> <h3>hello</h3> {{content}} </div>` })Copy the code

Obviously, the above effect is not what we want. So what’s the solution? Vue officially provides us with a

element as an outlet for hosting distribution content. This allows the parent to gracefully pass the DOM structure to its child, which perfectly parses the DOM.

2. Slot description

Slot is a slot in which a new DOM element is automatically filled when a child component uses the child component label. As follows:

<child> <p> Vue.component('child', {props: ['content'], template: `<div> <h3>hello</h3> <slot><slot> </div>` })Copy the code

The rendered result is:

Note: If there are multiple DOM elements, they are inserted into the tag together

Name slot

Suppose we need to place the HTML tag added by the parent component in a different place in the child component. How do you do that? As mentioned above,

is pothole. Then, when the parent component’s HTML tag is placed in a different location of the child component, you can name each pit occupied by the child component, and add the HTML element added by the parent component to the pit with the specified name, so that the distribution content is displayed in different locations.

Implementation method:

  1. Add name=’name name ‘to the distribution

    tag of the child component;

  2. The parent component then adds the slot=’name name ‘attribute to the distributed tag and places the tag in place.

<div class="footer" slot="footer"> bottom </div> <child> <div class=" app"> <child> <div class="header" slot="header"> </div> Vue.component('child', { props: ['content'], template: `<div> <slot name='header'></slot> <h3>hello</h3> <slot name='footer'><slot> </div>` })Copy the code

Named slots can be set to default content if the parent component does not define

,

default content
.

4. Scope slot

A scoped slot is a special type of slot with data that can be used as a reusable template to replace already rendered elements. This is used when a component needs to be reused; The scope slot is suitable for scenarios that contain at least three levels of component levels, which is an excellent componentization solution!

<div id="app"> <child> <template slot-scope="childData"> <li>{{childData.item}}</li> </template> </child> </div> Vue.component('child', { props: ['content'], data: function() { return { list: ['A', 'B', 'C'] } }, template: '<div> <h3>hello</h3> <ul> // item is the data passed to the upper layer, A single slot is converted to multiple tags in scope when called <slot V-for ="item of list" :item="item"></slot> </ul> </div> '})Copy the code

1.

  • Slot-scope is equivalent to an object whose data is passed by the child component slot binding.

  • Items in child components are data passed to the upper layer, and a single slot is converted to multiple labels in scope when called.

~~ don’t go, a thumbs-up ~~~~