slot插槽的作用：
爲了讓我們封裝的組件更加具有擴展性
讓使用者可以決定組件內部的一些內容到底展示什麼
slot插槽的簡單使用：
<div id='app'>
<temp>
<div>在組件中使用的插槽</div> <!-- 傳遞了插槽內容，顯示 傳遞的內容：在組件中使用的插槽 -->
</temp>
<temp></temp> <!-- 沒有傳遞插槽內容，顯示 默認要展示的內容：西西 -->
<temp>
<h3>我是一隻修行千年的狐</h3>
<p>千年等待，千年孤獨</p> <!-- 都會被插槽所替換掉 顯示：我是一隻修行千年的狐 千年等待，千年孤獨 -->
</temp>
</div>
<template id="temp">
<div>
<h2>哈哈</h2>
<slot><span>西西</span></slot> <!-- 使用slot插槽進行站位 -->
</div>
</template>
<script src=' https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {},
methods: {},
components: {
temp: {
template: '#temp'
}
}
})
</script>
所展示的界面效果：
具名插槽的使用：
<div id='app'>
<temp>
<button slot="left">返回</button>
<span slot="center">標題</span>
</temp>
</div>
<template id="temp">
<div>
<!-- 通過name指定一個名稱，在需要使用的組件中使用slot進行綁定 -->
<slot name="left">左邊</slot>
<slot name="center">中間</slot>
<slot name="right">右邊</slot>
</div>
</template>
<script src=' https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {},
methods: {},
components: {
temp: {
template: '#temp'
}
}
})
</script>
所展示的界面效果：
slot作用域插槽： 父組件替換插槽的標籤，但是內容由子組件來提供
<div id='app'>
<temp>
</temp>
<!-- 目的需求：獲取子組件中的數據展示不同的風格 -->
<temp>
<!-- 通過slot-scope得到子組件的slot插槽對象 , 此時solt.data等於languages-->
<template slot-scope="solt"><span>{{ solt.data.join('-') }}</span></template>
</temp>
</div>
<template id="temp">
<!-- 將languages數據通過slot插槽標籤綁定出去 -->
<div>
<slot :data="languages">
<ul>
<li v-for="item in languages">{{ item }}</li>
</ul>
</slot>
</div>
</template>
<script src=' https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {},
methods: {},
components: {
temp: {
template: '#temp',
data() {
return {
languages: ['JavaScript', 'C++', 'Java', 'Python', 'C#']
}
}
}
}
})
</script>
所展示的界面效果：
