因為最近在學習vue.js，正好之前遇到一個公司的專案，做一個單一活動頁，裡面每個產品介紹的樣式都是統一的，因為公司專案不方便截圖展示，那我就用一個粗糙簡略的頁面代替一下

假設說我想做如上的效果，然後點選整個藍色部分可以獲取當前id，之前在做的時候嘗試著使用了v-for，確實實現了靜態頁面，稍微寫下程式碼：

 <div id="vm1">
        <p>rabbit</p>
        <div v-for='todo in todos'  :key="todo.id">
            <p>{{todo.name}}</p>
            <p>{{todo.hobby}}</p>
            <h1>詳細介紹</h1>
        </div>
    </div>
 

<script>
        new Vue({
            el:"#vm1",
            data:{
                todos:[
                    {name:"cat",hobby:"sing",id:"0"},
                    {name:"dog",hobby:"dance",id:"1"}
                ]
            }
        })
    </script>

這個的實現很簡單，然後就是點選可以獲取每個對應的id，想要獲取id，第一個想到的方法就是利用元件，利用父子元件data傳遞的方法，用v-bind綁定當前的id，然後在子元件中獲取這個id，那麼問題來了，把哪個部分當做元件呢，因為我當時並沒有學到插槽，使用的元件都是內容全部用template替換掉，而只有在子元件的部分才能獲取id，如果我把整個v-for的部分當做元件，如果是用template整體替換，那確實很費神。所以我就直接將<h1>作為元件部分，

<div id="vm1">
        <p>rabbit</p>
        <div v-for='todo in todos'  :key="todo.id" >
            <p>{{todo.name}}</p>
            <p>{{todo.hobby}}</p>
            <temp :id="todo.id"></temp>
        </div>
    </div>

<script>
        Vue.component("temp",{
            props:["id"],
            template:"<h1 @click='pomp()'>詳細介紹</h1>" ,
            methods:{
                pomp:function(){
                    alert(this.id);
                }
            }
        })
        new Vue({
            el:"#vm1",
            data:{
                todos:[
                    {name:"cat",hobby:"sing",id:"0"},
                    {name:"dog",hobby:"dance",id:"1"}
                ]
            }
        })
    </script>

也就是說，在元件裡，我原本寫在父元件中不想被替換掉的部分，我可以放在子元件裡的<slot>裡，那麼我就可以將整個div，作為一個元件，然後子元件裡直接放入一個<slot>插槽，就可以在點選div的時候獲取id，並且依然保證v-for的正確執行，還能簡化程式碼。

<div id="vm1">
        <p>rabbit</p>
        <temp v-for='todo in todos'  :key="todo.id" :id="todo.id" >
            <p>{{todo.name}}</p>
            <p>{{todo.hobby}}</p>
            <h1>詳細介紹</h1>
        </temp>
    </div>

<script>
        Vue.component("temp",{
            props:["id"],
            template:"<div class='bg' @click='pomp()'>" +
            "<slot></slot>" +
            "</div>",
            methods:{
                pomp:function(){
                    alert(this.id);
                }
            }
        })
        new Vue({
            el:"#vm1",
            data:{
                todos:[
                    {name:"cat",hobby:"sing",id:"0"},
                    {name:"dog",hobby:"dance",id:"1"}
                ]
            }
        })
    </script>

可以在網頁中F12檢視元素，這樣能更直觀的看到插槽的效果

可以看到原本是在父元件中的內容，現在全部都放到子元件的div裡面，並且將<slot>標籤也都替換掉了。

以上就是我學到<slot>插槽的一點點心得體會，vue框架我也是還在學習中，如果有什麼不正確的地方還請各位大佬批評指正。

以上。