因爲最近在學習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>插槽的時候我突然發現，這不就是可以解決我當時問題的方法嗎，根據vue官網的文檔，當子組件模板只有一個沒有屬性的插槽時，父組件傳入的整個內容片段將插入到插槽所在的 DOM 位置，並替換掉插槽標籤本身。
也就是說，在組件裏，我原本寫在父組件中不想被替換掉的部分，我可以放在子組件裏的<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框架我也是還在學習中，如果有什麼不正確的地方還請各位大佬批評指正。
以上。