JavaScript之在Vue中如何使用插槽slot

這篇文章主要為大家展示了“JavaScript之在Vue中如何使用插槽slot”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JavaScript之在Vue中如何使用插槽slot”這篇文章吧。

在Vue中使用插槽：slot

1、在子組件的template里可以直接使用slot標(biāo)簽<slot></slot>，它可以顯示父組件向子組件插入的內(nèi)容。

2、slot標(biāo)簽里面可以寫一些默認(rèn)值，當(dāng)父組件沒有插入內(nèi)容的時(shí)候它就會(huì)顯示默認(rèn)值，插入內(nèi)容時(shí)就只顯示插入的內(nèi)容。

3、當(dāng)使用多個(gè)slot標(biāo)簽時(shí)，直接插入多個(gè)內(nèi)容時(shí)，每個(gè)slot標(biāo)簽內(nèi)都會(huì)包括所有插入的內(nèi)容。

可以通過slot屬性給插入的不同內(nèi)容設(shè)置指定的名字，然后給相應(yīng)的slot標(biāo)簽設(shè)置相應(yīng)的name屬性值，就可以讓該slot標(biāo)簽顯示指定的插入內(nèi)容。

1、插槽是統(tǒng)稱，模板中的三個(gè)slot標(biāo)簽都是插槽。

2、但是多個(gè)插槽需要區(qū)分，會(huì)分別設(shè)置一個(gè)name屬性。這個(gè)就叫做“具名插槽”，需要使用name屬性命名。

3、上面的是插入插槽的內(nèi)容，將某個(gè)名字的內(nèi)容插到子組件對(duì)應(yīng)名字里面去。這里就是插入到name="footer"這個(gè)插槽中。

4、一般只有一個(gè)插槽的時(shí)候，不需要具名哦，多個(gè)才需要name來區(qū)分。

<div id="app">
      <child>
       <!--  <div slot="header">header</div> -->
        <div slot="footer">footer</div>
      </child>
    </div>
    <script>
   Vue.component('child',{
    //通過插槽slot可以更方便地向子組件傳遞元素,同時(shí)子組件使用插槽的內(nèi)容也非常簡(jiǎn)單
    template:`<div>
                <slot name='header'>
                  <h7>header插槽內(nèi)容為空的默認(rèn)值</h7>
                </slot>
                <div class="content">body</div>
                <slot name='footer'></slot>
              </div>`
   })
    var vm = new Vue({
        el: "#app",
    })
    </script>

作用域插槽：使用template標(biāo)簽包裹

1、<slot v-for='item of list' :item=item></slot>，只確定要對(duì)列表做一個(gè)循環(huán)，但是列表的每一項(xiàng)怎么顯示由外部決定。

2、所以需要給子組件傳遞一個(gè)slot，首先一定要在最外層套一個(gè)template【固定寫法】（這就是作用域插槽），同時(shí)要寫一個(gè)slot-scope屬性（屬性值是自定義的）。（如：<template slot-scope='props'></template>，含義為子組件在使用slot的時(shí)候，會(huì)往slot里面?zhèn)鬟f一個(gè)item數(shù)據(jù)，在上面使用子組件的時(shí)候就可以用這個(gè)數(shù)據(jù)，這個(gè)數(shù)據(jù)就放在slot-scope屬性值中）

3、應(yīng)該使用作用域插槽的情況：當(dāng)子組件要做循環(huán)或者它的某一部分應(yīng)該由外部傳遞進(jìn)來的時(shí)候。

使用作用域插槽時(shí)，子組件可以向父組件的插槽里面?zhèn)鲾?shù)據(jù)，父組件傳遞過來的插槽如果想接收這個(gè)數(shù)據(jù)，必須在外層使用一個(gè)template，同時(shí)通過slot-scope對(duì)應(yīng)的屬性名來接收傳遞過來的數(shù)據(jù)。

<div id="app">
        <child>
          <!--
            父組件調(diào)用子組件時(shí),給子組件插入一個(gè)作用域插槽template,
            插槽里聲明一個(gè)從子組件接收的數(shù)據(jù)item放在slot-scope的屬性(props)里,然后通過H1模版方式展現(xiàn)
            -->
           <template slot-scope="props">
             <li>{{props.item}} -hello</li>
           </template>
        </child>
    </div>
    <script>
    Vue.component('child', {
        data:function(){
          return{
            list:[1,2,3,4]
          }
        },
        //當(dāng)子組件用slot時(shí),往slot里傳遞一個(gè)item的數(shù)據(jù),在父組件時(shí)就能用這個(gè)數(shù)據(jù)
        template:`<div>
                    <ul>
                      <slot v-for="item of list" :item=item>
                      </slot>
                    </ul>
                  </div>`
                 
    })
    var vm = new Vue({
        el: "#app"
    })
 </script>

以上是“JavaScript之在Vue中如何使用插槽slot”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！