JavaScript - Using slots in Vue: slot

Using slots in Vue: slot

1. The slot tag <slot></slot> can be used directly in the template of the child component, which can display the content inserted by the parent component into the child component.

2. You can write some default values ​​in the slot tag. When the parent component does not insert content, it will display the default value. When inserting content, it will only display the inserted content.

3. When using multiple slot tags and directly inserting multiple contents, each slot tag will include all the inserted contents.

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

1. Slot is a general term. The three slot tags in the template are all slots.

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

3. The above is the content inserted into the slot, inserting the content of a certain name into the corresponding name of the subcomponent. Here it is inserted into the slot name="footer".

4. Generally, when there is only one slot, it does not need to be named. Only when there are multiple slots do you need a name to distinguish them.

<div id="app">
      <child>
       <!-- <div slot="header">header</div> -->
        <div slot="footer">footer</div>
      </child>
    </div>
    <script>
   Vue.component('child',{
    //Slots make it easier to pass elements to subcomponents, and it is also very simple for subcomponents to use the content of the slots template:`<div>
                <slot name='header'>
                  <h6>Default value of header slot content being empty</h6>
                </slot>
                <div class="content">body</div>
                <slot name='footer'></slot>
              </div>`
   })
    var vm = new Vue({
        el: "#app",
    })
    </script>

Scoped slots: Wrap with template tag

1. <slot v-for='item of list' :item=item></slot>, only determines whether to loop over the list, but how each item in the list is displayed is determined externally.

2. So you need to pass a slot to the child component. First, you must put a template [fixed writing method] in the outermost layer (this is the scope slot), and write a slot-scope attribute (the attribute value is customized). (For example: <template slot-scope='props'></template>, which means that when a subcomponent uses a slot, it will pass an item data into the slot, and this data can be used when the subcomponent is used above. This data is placed in the slot-scope attribute value)

3. Situations where scoped slots should be used: when a subcomponent needs to be looped or a part of it should be passed in from the outside.

When using scoped slots, child components can pass data to the parent component's slots. If the slot passed by the parent component wants to receive this data, it must use a template in the outer layer and receive the passed data through the attribute name corresponding to the slot-scope.

<div id="app">
        <child>
          <!--
            When the parent component calls the child component, a scope slot template is inserted into the child component.
            In the slot, declare a data item received from the child component and put it in the slot-scope's props, and then display it through the H1 template -->
           <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 the child component uses slot, pass the data of an item to the slot, and then use this data 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 ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!