組件的插槽：
組件的插槽也是為了讓我們封裝的組件更加具有拓展性尘应。
預(yù)留空間犬钢，讓使用者可以決定組件內(nèi)部的內(nèi)容展示玷犹。
在移動開發(fā)中洒疚，幾乎每個(gè)頁面都有導(dǎo)航欄油湖。我們一般都會封裝成一個(gè)插件，比如nav-bar組件撤奸，一旦有了這樣一個(gè)組件，我們就可以在多個(gè)頁面中達(dá)到復(fù)用的效果.
插槽的基本使用：大家共用一個(gè)組件矢棚，但每個(gè)組件各自可以有屬于自己的展示方式和空間蒲肋。
使用方式：在組件模板里面定義一對<slot></slot>標(biāo)簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue根實(shí)例模板（父組件） -->
<div id="app">
<!-- 調(diào)用已經(jīng)注冊的子組件 -->
<div>
<com><button>按鈕</button></com>
<com><h1>按鈕</h1></com>
<com><i>按鈕</i></com>
<com><strong>按鈕</strong></com>
</div>
</div>
<!-- 子組件模板 -->
<template id="com">
<div>
<h2>我是組件</h2>
<slot></slot>
</div>
</template>
<script>
//將Vue實(shí)例作為父組件
const app = new Vue({
el: '#app',
data() {
return {
}
},
//子組件
components: {
com: {
template:'#com'
}
}
})
</script>
</body>
</html>
設(shè)置插槽的默認(rèn)值：<slot>放置標(biāo)簽（比如button標(biāo)簽）</slot>
具名插槽：找到屬于自己的slot
編譯作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue根實(shí)例模板（父組件） -->
<div id="app">
<!-- 調(diào)用已經(jīng)注冊的子組件 -->
<div>
<com v-show="isShow"></com>
</div>
</div>
<!-- 子組件模板 -->
<template id="com">
<div>
<h2>我是子組件</h2>
</div>
</template>
<script>
//將Vue實(shí)例作為父組件
const app = new Vue({
el: '#app',
data() {
return {
isShow: true
}
},
//子組件
components: {
com: {
template:'#com'
},
data() {
return {
isShow: false
}
},
}
})
</script>
</body>
</html>
父組件的isShow設(shè)定為true,子組件的isShow:false,最終渲染到頁面中的是vue實(shí)例里定義的isShow.
控制臺查看距糖。
為什么會只有vue實(shí)例的isShow生效呢悍引？
雖然子組件綁定了v-show="isShow",理應(yīng)去子組件模板下找才對帽氓，但vue默認(rèn)綁定的是vue根實(shí)例的模板，所以會在直接在vue實(shí)例的模板下去找浓领，這就是作用域联贩，所有的變量都會在vue里里面去找捎拯。
作用域插槽：父組件替換插槽的標(biāo)簽署照，但是數(shù)據(jù)由子組件來提供。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Vue根實(shí)例模板（父組件） -->
<div id="app">
<!-- 調(diào)用已經(jīng)注冊的子組件 -->
<div>
<com></com>
<com>
<!--目的是獲取子組件的中的pLanguages（pLanguages它在子組件作用域里面）没隘，
但<com/>自己的位置卻是在vue實(shí)例作用域里面,所以我們不存在跨域獲取-->
<template slot-scope="slot">
<span v-for="item in slot.data">{{item}} -</span>
<!-- <span>{{slot.data.join(' - ')}}</span> -->
</template>
</com>
</div>
</div>
<!-- 子組件模板 -->
<template id="com">
<div>
<h2>我是子組件</h2>
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script>
//將Vue根實(shí)例作為父組件
const app = new Vue({
el: '#app',
data() {
return {
}
},
//子組件
components: {
com: {
template: '#com',
data() {
return {
pLanguages: ['JavaScript', 'C++', 'Java', 'Python', 'Go', 'Swift']
}
},
}
}
})
</script>
</body>
</html>
演變到了v-slot
https://blog.csdn.net/liushijun_/article/details/92186739
