JavaScript Use slots in Vue: slot

Directory use slot in Vue: slot scope slot: Wrap summary with template tag

Using slots in Vue: slot

1. The slot tag can be directly used in the template of the subcomponent < slot > < /slot > That displays what the parent component inserts into the child component.

2. slot tag can write 1 default value. When the parent component does not insert content, it will display the default value, and when inserting content, only the inserted content will be displayed.

3. When multiple slot tags are used, when multiple contents are inserted directly, all inserted contents will be included in each slot tag.

You can use the slot attribute to set the specified name for different inserted content, and then set the corresponding name attribute value for the corresponding slot tag, so that the slot tag can display the specified inserted content.

1. Slots are collectively referred to, and all three slot tags in the template are slots.

2. However, multiple slots need to be distinguished, and one name attribute will be set respectively. This is called a "named slot" and needs to be named with the name attribute.

3. The above is the content of the insertion slot. Insert the content of a certain name into the corresponding name of the subcomponent. This is the insertion into the slot name = "footer".

When there is only one slot in 4 and 1, you don't need to be named, and you need name to distinguish multiple slots.

<div id="app">
      <child>
       <!--  <div slot="header">header</div> -->
        <div slot="footer">footer</div>
      </child>
    </div>
    <script>
   Vue.component('child',{
    // Through the slot slot You can pass elements to child components more conveniently , At the same time, it is very simple for subcomponents to use the contents of slots 
    template:`<div>
                <slot name='header'>
                  <h6>header Default for empty slot contents </h6>
                </slot>
                <div class="content">body</div>
                <slot name='footer'></slot>
              </div>`
   })
    var vm = new Vue({
        el: "#app",
    })
    </script>

Scope slot: Wrap with template label

1. < slot v-for='item of list' :item=item > < /slot > Determine that only 1 loop is to be made on the list, but how each 1 item of the list is displayed is externally determined.

2. Therefore, it is necessary to pass an slot to the subcomponent. First, an template "fixed writing" (this is the scope slot) must be set on the outermost layer, and an slot-scope attribute should be written at the same time (the attribute value is custom). (For example: < template slot-scope='props' > < /template > When a subcomponent uses slot, it will pass one item data to slot, which can be used when using a subcomponent above, and this data is placed in the attribute value of slot-scope)

3. Scope slots should be used: When a subcomponent is going to loop or a part of it should be passed in from outside.

When using the scope slot, the child component can transfer data to the slot of the parent component. If the slot transferred by the parent component wants to receive this data, it must use an template in the outer layer and receive the transferred data through the attribute name corresponding to slot-scope.

<div id="app">
        <child>
          <!--
             When a parent component calls a child component, , Insert a subcomponent 1 Scope slots template,
             Statement in slot 1 Data received from subcomponents item Put on slot-scope Properties of (props) Li , And then through H1 Template mode display 
            -->
           <template slot-scope="props">
             <li>{{props.item}} -hello</li>
           </template>
        </child>
    </div>
    <script>
    Vue.component('child', {
        data:function(){
          return{
            list:[1,2,3,4]
          }
        },
        // When a subcomponent uses the slot Hour , To slot Inside transmission 1 A item Data of , This data can be used in the parent component 
        template:`<div>
                    <ul>
                      <slot v-for="item of list" :item=item>
                      </slot>
                    </ul>
                  </div>`
                 
    })
    var vm = new Vue({
        el: "#app"
    })
 </script>

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!