JavaScript--在Vue中使用插槽:slot

目录

• 在Vue中使用插槽：slot
• 作用域插槽：使用template标签包裹
• 总结

在Vue中使用插槽：slot

1、在子组件的template里可以直接使用slot标签<slot></slot>，它可以显示父组件向子组件插入的内容。

2、slot标签里面可以写一些默认值，当父组件没有插入内容的时候它就会显示默认值，插入内容时就只显示插入的内容。

3、当使用多个slot标签时，直接插入多个内容时，每个slot标签内都会包括所有插入的内容。

可以通过slot属性给插入的不同内容设置指定的名字，然后给相应的slot标签设置相应的name属性值，就可以让该slot标签显示指定的插入内容。

1、插槽是统称，模板中的三个slot标签都是插槽。

2、但是多个插槽需要区分，会分别设置一个name属性。这个就叫做“具名插槽”，需要使用name属性命名。

3、上面的是插入插槽的内容，将某个名字的内容插到子组件对应名字里面去。这里就是插入到name="footer"这个插槽中。

4、一般只有一个插槽的时候，不需要具名哦，多个才需要name来区分。

<div id="app">
      <child>
       <!--  <div slot="header">header</div> -->
        <div slot="footer">footer</div>
      </child>
    </div>
    <script>
   Vue.component('child',{
    //通过插槽slot可以更方便地向子组件传递元素,同时子组件使用插槽的内容也非常简单
    template:`<div>
                <slot name='header'>
                  <h6>header插槽内容为空的默认值</h6>
                </slot>
                <div class="content">body</div>
                <slot name='footer'></slot>
              </div>`
   })
    var vm = new Vue({
        el: "#app",
    })
    </script>

作用域插槽：使用template标签包裹

1、<slot v-for='item of list' :item=item></slot>，只确定要对列表做一个循环，但是列表的每一项怎么显示由外部决定。

2、所以需要给子组件传递一个slot，首先一定要在最外层套一个template【固定写法】（这就是作用域插槽），同时要写一个slot-scope属性（属性值是自定义的）。（如：<template slot-scope='props'></template>，含义为子组件在使用slot的时候，会往slot里面传递一个item数据，在上面使用子组件的时候就可以用这个数据，这个数据就放在slot-scope属性值中）

3、应该使用作用域插槽的情况：当子组件要做循环或者它的某一部分应该由外部传递进来的时候。

使用作用域插槽时，子组件可以向父组件的插槽里面传数据，父组件传递过来的插槽如果想接收这个数据，必须在外层使用一个template，同时通过slot-scope对应的属性名来接收传递过来的数据。

<div id="app">
        <child>
          <!--
            父组件调用子组件时,给子组件插入一个作用域插槽template,
            插槽里声明一个从子组件接收的数据item放在slot-scope的属性(props)里,然后通过H1模版方式展现
            -->
           <template slot-scope="props">
             <li>{{props.item}} -hello</li>
           </template>
        </child>
    </div>
    <script>
    Vue.component('child', {
        data:function(){
          return{
            list:[1,2,3,4]
          }
        },
        //当子组件用slot时,往slot里传递一个item的数据,在父组件时就能用这个数据
        template:`<div>
                    <ul>
                      <slot v-for="item of list" :item=item>
                      </slot>
                    </ul>
                  </div>`

    })
    var vm = new Vue({
        el: "#app"
    })
 </script>

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注我们的更多内容！