前言

Vue的slot插槽，可以從字面意思來了解用途，占用占坑的意思，既然是占坑肯定是先占坑后面有其他具體的內容來替換代替。根據slot的應用場景可以分為匿名slot和具名slot。

一、個人理解及插槽的使用場景

剛開始看教程我的疑惑是為什么要用插槽，它的使用場景是什么，很多解釋都是“父組件向子組件傳遞dom時會用到插槽”，這并不能很好的解決我的疑惑。既然你用了子組件，你為什么要給她傳一些dom，直接去定義復用的子組件不就好了。后來想想覺得一個復用的組件在不同的地方只有些許變化，如果去重寫子組件是很不明智的一件事，當然也可以將不同之處都寫在子組件里，然后通過父組件傳來的標識進行選擇顯示。其實質是對子組件的擴展，通過slot插槽向組件內部指定位置傳遞內容，即將<slot></slot>元素作為承載分發內容的出口；

二、用于理解的例子

目前還沒接觸到使用插槽解決實際問題很好的例子，只能這樣去為了理解插槽而用，可能并沒有很好的利用到插槽的好處。

在父組件定義想要傳入子組件作為插槽的內容，App.vue

<template> <div id="app"> <div> <input type="text" v-model="info"> <button @click="handleClick">添加</button> </div> <todolist v-for="item in list" :key="item" :message="msg"> <template v-slot:item="itemProps" > <!-- tips1:<span>即為插槽內容　　　　　　　　tips2:item是插槽的名字，為具名插槽，可對應插入到子組件中具體的插槽位置  tips3:itemProps可以獲取到子組件（即插槽 prop）傳出來的狀態（值）， 　　　插槽 prop 的對象命名為 itemProps，可任意命名，itemProps變量存在于 <template> 作用域中 　--> <span :style="{fontSize: '20px', color: itemProps.checked ? 'red': 'blue'}">{{item}}</span> </template> </todolist> </div></template><script> import todolist from './components/todolist.vue';export default { name: 'App', components: { todolist }, data(){ return { msg: '4-2-05', info: '', list: [], } }, methods: { handleClick() { // 獲取到input輸入的東西，然后加入到數組中 this.list.push(this.info); this.info = '' } },}</script><style></style>

在子組件利用<slot></slot>元素作為承載分發內容的出口，父組件的插槽內容將在其中顯示，todolist.vue

<template> <div> {{message}} <li class="item"> <input type="checkbox" v-model="checked"> <slot name="item" v-bind="{checked}" ></slot> <!--插槽內容能夠訪問子組件中才有的數據是很有用的,又因為父級模板里的所有內容都是在父級作用域中編譯的；子模板里的所有內容都是在子作用域中編譯的 所以得想辦法獲取到子組件的數據。--> <!--給子組件綁定一個動態參數,checked作為一個 <slot> 元素的特性綁定上去,綁定在 <slot> 元素上的特性被稱為插槽 prop--> </li> </div></template><script> export default { props: ['item','message'], // 因為父組件在插槽內容里使用item， 即此句代碼<span>{{item}}</span> // 相當于需要傳遞給子組件的內容，也就是通常的父子組件通信，所以在子組件需要通過props來獲取 data() {  return {  checked: false,  } }, created() {  console.log(this.message); } }</script><style scoped> .item { color: red; } li{ list-style: none; }</style>