1.插槽的基本認識：

作用：讓組件內部的一些結構支持自定義

插槽的分類：

1.默認插槽（組件內只能定制一處結構）

2.具名插槽（組件內可以定制多次結構）

簡單而言：就是你希望封裝一個組件，這個組件會在多個地方使用，但是每個使用的地方其中的內容部分又是不同的，這個時候你希望自定義，就會運用到插槽。

2.默認插槽的基礎語法：

1.組件內需要定制的部分用<slot></slot>占位

2.使用組件時，<組件名></組件名>在標簽內容傳入替換slot的內容

下面進行代碼演示：

使用slot標簽占位

?完成的效果圖：

此時我們又會面臨一個問題，如果我不給自定義內容，就不會有任何內容，這樣一片空白實在是不好看。那我們如何加默認值（設置默認內容）?

3.插槽的后備內容：

1.語法：在<slot>標簽內，放置內容，作為默認顯示內容。

作用：1.組件標簽使用時沒有傳入內容，會slot會顯示后備內容。

2.組件標簽使用時有傳入內容，則slot會被整體替換掉。

下面進行代碼演示：

?效果圖：

4.插槽—具名插槽（具有名字的插槽）

上面已經講解了默認插槽，但是它有一個明顯的缺點就是只能定制一個地方。而下面所說的具名插槽就可以很好的解決這個問題。

作用：一個組件內有多處結構，需要外部傳入標簽，進行定制。

1.具名插槽語法：

1.多個slot使用name屬性區分名字

2.template配合v-slot：名字來分發對應的標簽。

3.為了方便官方（v-slot:插槽名可以簡寫成#插槽名）

下面進行代碼演示：

效果圖：

使用#插槽名演示

?5.作用域插槽（是插槽的一個傳參語法）：

作用域插槽：定義slot插槽的同時，可以傳值的，給插槽上可以綁定數據，將來使用組件時可以使用。

使用場景：

1.父傳子需要渲染內容時

2.比如我們常使用的刪除、編輯等功能都需要當前項的id值，但是id屬于組件內部的數據通過作用域插槽傳值綁定，進而使用。

作用域插槽的基本使用步驟：

1.給slot標簽，已添加屬性的方式傳值

2.所有添加的屬性，都會被收集到一個對象中去。

3.在template中，通過“#插槽名字=“obj””接收(這里的obj可以自定義，就是個對象名而已)，默認插槽名為default

下面進行代碼演示：

組件：MyTable.vue代碼：

<template><table class="my-table"><thead><tr><th>序號</th><th>姓名</th><th>年紀</th><th>操作</th></tr></thead><tbody><tr  v-for="(item,index) in data" :key="item.id"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td><!-- 1.給slot標簽已添加屬性的方式傳值 --><slot :row="item" msg="測試文本"></slot><!-- 2.會將所用的屬性添加到一個對象中去 --></td></tr></tbody></table>
</template><script>
export default {props: {data: Array,},
}
</script><style scoped>
.my-table {width: 450px;text-align: center;border: 1px solid #ccc;font-size: 24px;margin: 30px auto;
}
.my-table thead {background-color: #1f74ff;color: #fff;
}
.my-table thead th {font-weight: normal;
}
.my-table thead tr {line-height: 40px;
}
.my-table th,
.my-table td {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;
}
.my-table td:last-child {border-right: none;
}
.my-table tr:last-child td {border-bottom: none;
}
.my-table button {width: 65px;height: 35px;font-size: 18px;border: 1px solid #ccc;outline: none;border-radius: 3px;cursor: pointer;background-color: #ffffff;margin-left: 5px;
}
</style>

下面是App.vue代碼：

?

<template><div><!-- :data="list"相當于父傳子 --><MyTable :data="list"><!-- 注意要用<template></template>包裹 --><!-- 由于我們使用的是默認插槽，所以用default --><!-- 3.通過template #插槽名="變量名" 接收 --><template #default="obj"><button @click="del(obj.row.id)">刪除</button></template></MyTable><MyTable :data="list2"><template #default="{row}"><!-- 這個對象也支持結構 --><button @click="show(row)">查看</button></template></MyTable></div>
</template><script>
import MyTable from './components/MyTable.vue'
export default {data () {return {list: [{ id: 1, name: '張小花', age: 18 },{ id: 2, name: '孫大明', age: 19 },{ id: 3, name: '劉德忠', age: 17 },],list2: [{ id: 1, name: '趙小云', age: 18 },{ id: 2, name: '劉蓓蓓', age: 19 },{ id: 3, name: '姜肖泰', age: 17 },]}},components: {MyTable},methods:{del(id){this.list=this.list.filter(item=>item.id!==id)},show(row){console.log(row)}}
}
</script>

效果圖：