Development of lipinyou system

The data in the scope slot is defined in the sub components.

Sometimes the scope slot is very useful. For example, when using the element UI table to customize the template, the scope slot is used. The element UI defines the display format of each cell data. We can customize the display format of data through the scope slot, which has strong expansibility for the secondary development.


The scope slot uses < template > to define a template, which can take two parameters, namely:

 Slot scope; the variables in the template. The old version used the scope attribute

 Slot: the name of the scope slot. It is used when specifying multiple scope slots. The default is default, that is, the default slot

For example:

Copy code
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

</head>
<body>

<div id="app">
      <Child>
        <template slot="header" slot-scope="props">                 <!--Defined a header Templates for scope slots of-->
          <h1>{{props.info.name}}-{{props.info.age}}</h1>
        </template>
        <template slot-scope="show">                                <!--Template that defines the default scope slot-->
          <p>{{show.today}}</p>
        </template>
      </Child>
  </div>
  <script>
    Vue.config.productionTip=false;
    Vue.config.devtools=false;
    Vue.component('Child',{
      template:`<div class="container">
                    <header><slot name="header" :info="info"></slot></header>     //header slot
                    <main><slot today="Monday">Default content</slot></main>               //Default slot
                </div>`,
          data(){
            return { info:{name:'ge',age:25} }
          }
    })
    debugger
    new Vue({
      el: '#app',
      data:{
        title:'I am the title.',
        msg:'I am content.'
      }
    })
  </script>

</body>
</html>
Copy code
We define two slots in the subcomponent, as follows:

 In the header slot, a feature named info is bound through v-bind. The value is an object, including a name and age attribute

 The other is a normal slot, passing a today feature with a value of Monday

The template is defined when the parent component references the child component. The rendered result is as follows:

The corresponding html code is as follows:

In fact, Vue internally compiles the child nodes under the parent component template into a function, which is called when the child component is instantiated, so the scope is the scope of the child component

Source code analysis

When the parent component resolves the template and converts it to an AST object, the processSlot() function is executed as follows:

Copy code
function processSlot (el) {/ / line 9767 resolves slot
if (el.tag === 'slot') {/ / if slot

/*Logic of common slot*/

} else {

var slotScope;
if (el.tag === 'template') {                //If the label name is template (the logic of the scope slot)
  slotScope = getAndRemoveAttr(el, 'scope');          //Try to get scope
  /* istanbul ignore if */  
  if ("development" !== 'production' && slotScope) {  //Report some information in the development environment. Because the scope attribute is obsolete, the new version begins to use the slot scope attribute
    warn$2(
      "the \"scope\" attribute for scoped slots have been deprecated and " +
      "replaced by \"slot-scope\" since 2.5. The new \"slot-scope\" attribute " +
      "can also be used on plain elements in addition to <template> to " +
      "denote scoped slots.",
      true
    );
  }
  el.slotScope = slotScope || getAndRemoveAttr(el, 'slot-scope'); //Get the slot scope property and save the value to the slotScope property of the AST object
} else if ((slotScope = getAndRemoveAttr(el, 'slot-scope'))) {
  /*Other branches*/
}
var slotTarget = getBindingAttr(el, 'slot');          //Try to get the slot attribute
if (slotTarget) {                                     //If you get it
  el.slotTarget = slotTarget === '""' ? '"default"' : slotTarget;   //Save to el.slotTarget
  // preserve slot as an attribute for native shadow DOM compat
  // only for non-scoped slots.
  if (el.tag !== 'template' && !el.slotScope) {
    addAttr(el, 'slot', slotTarget);
  }
}

}
}
Copy code
At this point, for the < template slot = "header" slot scope = "props" > node, a slotScope and slotTarget attributes are added

Tags: Front-end Attribute Vue npm

Posted on Fri, 08 Nov 2019 04:19:04 -0500 by jamesh