插槽
在vue中，組件實例的作用域是孤立的，默認(rèn)情況下，父子組件的數(shù)據(jù)是不能共享的。所以子組件的內(nèi)容應(yīng)當(dāng)寫在子組件里面，父組件的內(nèi)容應(yīng)該寫在父組件里面。
當(dāng)把子組件的內(nèi)容寫到父組件中時，會丟失數(shù)據(jù)。
解決方案：用插槽slot
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<template id="aaa">
<div class="parent">
<p>父組件</p>
<bbb>
<p>測試內(nèi)容1</p>
<p>測試內(nèi)容2</p>
<p>測試內(nèi)容3</p>
</bbb>
</div>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg2:'我是父組件的數(shù)據(jù)'
}
},
template:'#aaa',
components:{
'bbb':{
template:`
<div class="child">
<!--<slot></slot>-->
<p>子組件</p>
</div>
`,
}
}
}
}
});
</script>
</body>
</html>
實名slot
這一類slot可以用一個特殊的屬性name來配置內(nèi)容分發(fā)，根據(jù)name來匹配內(nèi)容片段中有對應(yīng)slot特性的元素。可以有多個不同名字的slot同時存在，并且此時也可以有一個匿名slot，作為找不到匹配的內(nèi)容片段的備用插槽。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
<template id="aaa">
<div class="parent">
<p>父組件</p>
<bbb>
<p slot="my-header">我是頭部</p>
<p>測試內(nèi)容1</p>
<p>測試內(nèi)容2</p>
<p>測試內(nèi)容3</p>
<p slot="my-footer">我是尾部</p>
</bbb>
</div>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg2:'我是父組件的數(shù)據(jù)'
}
},
template:'#aaa',
components:{
'bbb':{
template:`
<div class="child">
<p>子組件</p>
<slot name="my-header">我是頭部默認(rèn)值</slot>
<slot name="my-body">我是正文默認(rèn)值</slot>
<slot></slot>
<slot name="my-footer">我是尾部默認(rèn)值</slot>
</div>
`,
}
}
}
}
});
</script>
</body>
</html>
