目錄

• 在中使用插槽：slot
• 作用域插槽：使用template標籤包裹
• 總結

在Vue中使用插槽：slot

1、在子元件的template裡可以直接使用slot標籤<slot></slot>，它可以顯示父元件向子元件插入的內容。

2、slot標籤裡面可以寫一些預設值，當父元件沒有插入內容的時候它就會顯示預設值，插入內容時就只顯示插入的內容。

3、當使用多個slot標籤時，直接插入多個內容時，每個slot標籤內都會包括所有插入的內容。

可以通過slot屬性給插入的不同內容設定指定的名字OOzeRzoi，然後給相應的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模版方式展現
            -->
           <temwww.cppcns.complate 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>

總結

本篇文章就到這裡了，希望能給你帶來幫助，也希望您能夠多多關注我們的更多內容！