slot(插槽)
- 有什么用
- 怎么用
- slot 默認(rèn)內(nèi)容 (slot 后備內(nèi)容)
- 具名 slot（具名插槽）
- 作用域插槽
- v-slot
有什么用
調(diào)用組件時(shí)，寫在組件標(biāo)簽內(nèi)的內(nèi)容，默認(rèn)不會(huì)被渲染
有時(shí)，需要組件標(biāo)簽內(nèi)的內(nèi)容能被渲染出來，slot 插槽實(shí)現(xiàn)
怎么用
slot的基本使用
- 定義組件時(shí)想好要在哪個(gè)位置去渲染 slot 內(nèi)容
- 在想好的位置哪里，放置一個(gè) slot 標(biāo)簽 即可 <slot></slot>
- slot 內(nèi)容 就會(huì)自動(dòng)去替換 slot 標(biāo)簽
slot 默認(rèn)內(nèi)容(slot 后備內(nèi)容)
寫在slot 標(biāo)簽內(nèi)的內(nèi)容就是這個(gè) slot 標(biāo)簽的默認(rèn)內(nèi)容
Vue.component("hello", {
template: `
<div>
<h1>Hello</h1>
<slot>
<p>我是這個(gè) slot 標(biāo)簽的默認(rèn)內(nèi)容</p>
</slot>
</div>
`,
});
具名 slot（具名插槽）
給slot標(biāo)簽 設(shè)置一個(gè) name 屬性。這時(shí)slot標(biāo)簽叫做 具名slot標(biāo)簽
- slot 在一個(gè)組件內(nèi)是可以使用多次的
- 給slot取了名字之后，slot 內(nèi)容想要 渲染在哪個(gè)slot，就需要設(shè)置slot屬性。屬性的值為某個(gè) slot 的名
- slot 有一個(gè)默認(rèn)的名字，就叫做 default
<slot></slot>
=== >
<slot name="default"></slot>
<div id="app">
<text-item>
<div>你好</div>
<div slot='top'>加油</div>
</text-item>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('text-item',{
template:`
<div>
<slot name='top'></slot>
<slot></slot>
</div>
`
})
var vm = new Vue({
el:'#app',
data:{
}
})
</script>
作用域插槽
插槽內(nèi)容 中使用 子組件中的作用域
<div id="app">
<hello>
// xxxx 如何能夠用上 hello 組件中 的 msg 數(shù)據(jù)
<p>我是一個(gè)插槽內(nèi)容。xxxx </p>
</hello>
</div>
步驟
- 1.定義組件的slot的時(shí)候，將要在插槽內(nèi)容中使用的數(shù)據(jù)，綁定在slot標(biāo)簽上
<slot :a="msg" :b="age" ></slot> -
在插槽內(nèi)容的標(biāo)簽上，設(shè)置 slot-scope 屬性。屬性值隨便寫。這個(gè)屬性值就是上一個(gè)步驟中綁定出來的數(shù)據(jù)的一個(gè)大對象
<p slot-scope="obj">我是一個(gè)插槽內(nèi)容。msg, age</p>obj === { a: "hello", b: 19 }
-
注意：不能綁定 name 屬性。因?yàn)閚ame 屬性有特殊用途。name 屬性用來做具名插槽的。
<div id="app">
<hello>
<p slot-scope='{a,b}'>{}{{a}}</p>
</hello>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<script>
Vue.component('hello',{
data:
function() {
return {
msg:'hello',
age:2
}
}
,
template:`
<div>
<slot :a='msg' :b='age'></slot>
<h1>1</h1>
</div>
`
})
var vm = new Vue({
el:'#app',
data:{
},
})
</script>
v-slot
一、slot 插槽 在 2.6.0 這個(gè)版本的時(shí)候，做了更新。提供了一個(gè)新的指令叫做 v-slot。
后續(xù)實(shí)現(xiàn)具名插槽與作用域插槽都使用 v-slot 來實(shí)現(xiàn)二、2.6.0 版本在什么時(shí)候發(fā)布的：2019-02-04號(hào)（農(nóng)歷2018年過年那天）
三、v-slot語法
v-slot:xxxx=yyyy
xxxx 插槽名字
yyyy 作用域插槽數(shù)據(jù)
1.v-slot 必須用在template元素上。
- 如果插槽沒有設(shè)置name名字的話： v-slot === v-slot:default
3.v-slot 簡寫 #
注意: 使用 簡寫時(shí)必須攜帶名字。
默認(rèn)的名字需要寫成：
' #default '
- 插槽只有一個(gè)的情況下，可以不使用 template 去包裹插槽內(nèi)容。而是直接將 v-slot 寫在組件標(biāo)簽上。
<div id="app">
<helloworld2 #bottom>
<p>加油</p>
</helloworld2>
<hr />
<helloworld>
<template #top>
<p>我的天</p>
</template>
<template #default>
<p>我的地</p>
</template>
</helloworld>
<hr />
<!-- 老語法的具名插槽使用 -->
<hello>
<p slot="top">我的天</p>
<p slot="bottom">我的地</p>
</hello>
<!-- 新語法的具名插槽使用 -->
<hello>
<template #top>
<p>我的天</p>
</template>
<template #bottom>
<p>我的地</p>
</template>
</hello>
<!-- 老語法的作用域插槽使用 -->
<world>
<p slot="top" slot-scope="{ msg, age }">
我的天-{{ msg }} - {{ age }}
</p>
</world>
<!-- 新語法的作用域插槽使用 -->
<world>
<template #top="obj">
<p>
我的天-{{ obj.msg }} - {{ obj.age }}
</p>
</template>
</world>
<!-- 新語法的作用域插槽使用 解構(gòu)賦值-->
<world>
<template #top="{ msg, age }">
<p>
我的天-{{ msg }} - {{ age }}
</p>
</template>
</world>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<script>
Vue.component("hello", {
template: `
<div>
<slot name="top"></slot>
<h1>hello</h1>
<slot name="bottom"></slot>
</div>
`,
});
Vue.component("world", {
data() {
return {
msg: "張三",
age: 18,
};
},
template: `
<div>
<slot name="top" :msg="msg" :age="age"></slot>
<h1>world</h1>
<slot name="bottom"></slot>
</div>
`,
});
Vue.component("helloworld", {
template: `
<div>
<slot name="top"></slot>
<h1>helloworld</h1>
<slot></slot>
</div>
`,
});
Vue.component("helloworld2", {
template: `
<div>
<h1>helloworld2</h1>
<slot name="bottom"></slot>
</div>
`,
});
var vm = new Vue({
el: "#app",
});
</script>
自我總結(jié)(寫給自己看的):
將組件標(biāo)簽內(nèi)的內(nèi)容渲染出來，使用slot插槽
然后又想在插槽內(nèi)使用組件內(nèi)的數(shù)據(jù)：
1.先在slot標(biāo)簽上用動(dòng)態(tài)屬性的形式接收數(shù)據(jù),例如:
:屬性名='組件內(nèi)的變量名'
<slot :a='msg' :b='age'></slot>
2.在插槽內(nèi)容的標(biāo)簽上，設(shè)置slot-scope
<p slot-scope='{a,b}'>{}{{a}}</p>
3.新語法: v-slot 寫在template上，
<template #top="{ msg, age }"> ====> v-slot= slot + slot-scope 具名+作用域'
4.默認(rèn)：#default (default不可省略)
聲明
以上僅學(xué)習(xí)筆記
