Detailed explanation of the scope slot for distribution

First of all, it is important to know that each component has its own scope. Each component is an instance of Vue() and has its own scope.

For example, there is a component like this:

('father-component1',{
  template:'<div class="father"><p>Hi,I'm the parent component</p>{{fatherMessage}}</div>',
  data:function(){
   return {
     fatherMessage:'This is a message sent by the parent component~'
   }
  },
});

This data only serves the template in the template. Similarly, the data of a child component only serves the template of the child component. Because they are all attributes within their respective scopes.

In slot distribution, whether it is a single distribution or a named distribution, the parent component replaces the data of the child component, or there is no replacement, and the default data of the child component is used. The two cannot coexist. This way they have no data contact.

However, by setting the scope slot, this situation can be changed, allowing the child component to obtain its own data when the parent component is distributed. As for what data it is, it is determined by the child component, so that it can be decoupled.

The scope slot passes a custom property of slot. The official DEMO is text, but it can also be other, with the value of exposed data.

This custom property has been stored in the prop object of the child component. Waiting to be retrieved by the parent component.

How to get it?

In the template of the parent component, use a special component <template> that comes with Vue, and use the scope property on the component. The value is a temporary variable, which contains a prop object passed from the child component. In the following example, I named it props.

Obtain the prop object passed by the child. At this time, the parent component can access the data exposed by the child component on the custom properties.

//js
('child-component4',{
  template:'<ul>' +
  '<slot name="child-ul" v-for="item in fruit" v-bind:text="">?</slot>' +
  '</ul>',
  data:function(){
   return {
     fruit:[
       {name:'apple'},
       {name:'banana'},
       {name:'orange'}
     ]
   }
  },
});
('father-component4',{
  template:'<child-component4>' +
  '<template scope="props" slot="child-ul">' +
  '<li class="child-li" >{{}}</li>' +
  '</template>' +
  '</child-component4>'
});
var app16 = new Vue({
  el:'#app16'
});
<div >
  <father-component4></father-component4>
</div>

The above component combination will be rendered as:

<div >
<ul>
  <li class="child-li">apple</li>
  <li class="child-li">banana</li>
  <li class="child-li">orange</li>
</ul>
</div>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.