1.插槽是啥啊？？
我們知道，在vue中，引入的子組件標簽中間是不允許寫內容的。為了解決這個問題，官方引入了插槽(slot)的概念。
插槽，其實就相當于占位符。它在組件中給你的HTML模板占了一個位置，讓你來傳入一些東西。插槽又分為匿名插槽、具名插槽以及作用域插槽。
你可能不太明白，為什么我要給子組件中傳入HTML，而不直接寫在子組件中呢？答案是這樣的。你可以想象一個場景，你有五個頁面，這五個頁面中只有一個區域的內容不一樣，你會怎么去寫這五個頁面呢？復制粘貼是一種辦法，但在vue中，插槽(slot)是更好的做法。
（這里我直接用新的寫法，什么廢棄的東西都不說了，沒意義！)
子組件代碼：
子組件
父組件代碼：
父組件
這一個例子就把匿名插槽和具名插槽說了！
1.匿名插槽：
在子組件中寫一個<slot></slot>占位就可以了！父組件中沒固定名字的都會顯示在這里
#xxx 來給它固定名字
2.具名插槽
簡而言之！就和匿名插槽相反么，子組件用<slot name="xxx"><slot>占位，父組件中#后面的和
自組件相同的內容會顯示在占位的內容中！
作用域插槽
什么是作用域插槽呢？這么說吧！如果父組件中想要用子組件的數據呢？怎么辦呢？
1.用$emit的方法傳值給父組件嗎？ 可以！但是沒必要，太復雜了
2.作用域插槽！
作用域插槽其實就是可以傳遞數據的插槽。子組件中的一些數據想在父組件中使用，必須通過規定的方法來傳遞。在官方文檔中提出了一條規則，父級模板里的所有內容都是在父級作用域中編譯的。子模板里的所有內容都是在子作用域中編譯的。如果你在父組件直接使用子組件中的值，是會報錯的。
作用域插槽
為了讓 子組件中的數據 在父級的插槽內容中可用，我們可以將 數據 作為 元素的一個特性綁定上去：
語法：v-bind:users="user"
● 子組件HelloWorld代碼
<template>
<div class="hello">
Helloworld組件
// 匿名插槽的作用域插槽
<div class='slotLeft'>
<slot v-bind:users="user"></slot>
</div>
// 具名插槽的作用域插槽
<div class='slotLeft'>
<slot name='helloWorld' v-bind:users="user"></slot>
</div>
</div>
</template>
<script>
export default {
data(){
return{
user:{
name:'oralinge',
age:18
}
}
}
}
</script>
綁定在 元素上的特性（v-bind:users=“user”）被稱為插槽 prop。現在在父級作用域中，我們可以使用帶值的 v-slot 來定義我們提供的插槽 prop 的名字。
匿名作用域插槽語法：v-slot:default="隨意取的名字"
// default可省略，簡寫為v-slot="隨意取的名字"
具名插槽的作用域插槽
與匿名插槽同理，只需要把default替換成插槽的name值即可
● 父組件Home代碼
<template>
<div class="home">
我是Home父組件
// 匿名插槽的作用域插槽
<HelloWorld>
<template v-slot:default="slotProps">
<h1>{{slotProps.users.name}}</h1>
</template>
</HelloWorld>
// 具名插槽的作用域插槽
<HelloWorld>
<template v-slot:helloWorld="slotProps">
<h1>{{slotProps.users.name}}</h1>
</template>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
注意：
- 父組件中的slotProps可以是隨意取的。
- 子組件中users是隨意取的，與之對應的是父組件中的users。
- 子組件中的user為數據。
