vue中插槽的個人理解

在vue中，插槽是一個用的比較多的API，在官方的文檔中，在 2.6.0 中，我們為具名插槽和作用域插槽引入了一個新的統一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的 attribute，

vue插槽的作用：在vue中實現的一套分發內容的API，將slot元素作為承載內容分發出口。用人話說就是：想要在一個組件標簽中添加新的內容，必須在該組件內聲明一個slot元素，否則，添加的新內容則不會被渲染。

通常我們會在vue中將各種通用的功能單獨拿出來進行封裝，以便於后面復用，但是有時候需要復用的組件不是完美契合，這個時候就需要用到插槽，slot可以讓用戶拓展組件，更好的實現組件的復用。

組件插槽分為三種：

　　1：默認插槽

　　　　使用方法：

　　　　　　子組件：　　　　　　　　　　

<div>
     <p>這里是子組件</p>
     <slot></slot>
</div>

　　       　　　　父組件：

 

<div>
    <!--引用子組件-->
    <myslot>
        <p>這里是父組件</p>//當想在父組件中渲染這一行數據時，必須要在引用的子組件中定義一個slot標簽
    </myslot>
</div>

 

　　

最后顯示內容：
這里是子組件
這里是父組件　

 

父組件想在引入的組件中顯示  <p>這里是父組件</p>，就必須先在子組件中用slot定義一個插槽，用來接收父組件傳遞的代碼，再才能正常的在頁面中渲染

　

  2：具名插槽

　　　顧名思義，具名插槽是在slot標簽上有一個屬性：name，可以將指定的代碼放入指定的插槽中

          具體定義如下：

<!--子組件-->
<template>
    <div>
        <hander>
            <!--這里放入name=“hander”的代碼段-->
            <slot name="hander"></slot>
        </hander>
        <footer>
             <!--這里放入name=“footer”的代碼段-->
             <slot name="footer"></slot>
        </footer>
    </div>
</template>        

　　

<!--父組件-->
<div>
    <p>大家好，這里是父組件</p>
    <template v-slot:hander>
        <span>這里是放入hander中的代碼段</span>
    </template>
    <template v-slot:footer>
       <span>這是放在footer中的代碼段</span>
    </template>
</div>

　　注意：v-slot指令只能寫在template中

                v-slot可以簡寫為#

　  3：作用域插槽

         作用域插槽主要用於解決的問題是：當父組件向子組件插槽傳遞模板內容時存在訪問子組件數據的問題

           可以看例子：

<!--子組件-->
<template>
    <div>
        <slot>{{user.name}}<slot>
    </div>
</template>
<script>
 export default{
    data(){
       return{
           user:{
                 name:"jay",
                 age:18
             }
        }
    }
}
</script>                                                

　　當父組件引用子組件時，想將子組件中的user.name替換為user.age時，不可以直接在父組件中更改子組件中的user.name，因為在官方文檔中，父級模板所有內容都是在父級作用域中編譯的，子級模板所有內容都是在子作用域中編譯的。

      為了解決子組件的user不能在父組件中使用的問題，我們可以將user用屬性綁定的方式傳給父組件，父組件用一個自定義名稱進行接收

      子組件可以這么寫：

<!--子組件-->
<template>
    <div>
        <slot :user="user">{{user.name}}<slot>
    </div>
</template>
<script>
 export default{
    data(){
       return{
           user:{
                 name:"jay",
                 age:18
             }
        }
    }
}
</script>  

　　

      因此，父組件可以這么寫：

<template>
    <myslot>
       <template v-slot="slotProps">
　　　　　　{{slotProps.user.age}}
       </template>
    </myslot>
</template>
<script>
import myslot from '@/component/myslot.vue'
export default{
        data(){
            return{}
         },
         components:{
            myslot
        }
    }
</script>    

　　在子組件中，將自己的數據用屬性綁定的方式傳輸給父組件，父組件在template中用v-slot="自定義名"，進行接收，再通過自定義名.進行數據訪問。