插槽
在vue中，组件实例的作用域是孤立的，默认情况下，父子组件的数据是不能共享的。所以子组件的内容应当写在子组件里面，父组件的内容应该写在父组件里面。
当把子组件的内容写到父组件中时，会丢失数据。
解决方案：用插槽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>测试内容1</p>
<p>测试内容2</p>
<p>测试内容3</p>
</bbb>
</div>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg2:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
template:`
<div class="child">
<!--<slot></slot>-->
<p>子组件</p>
</div>
`,
}
}
}
}
});
</script>
</body>
</html>
实名slot
这一类slot可以用一个特殊的属性name来配置内容分发，根据name来匹配内容片段中有对应slot特性的元素。可以有多个不同名字的slot同时存在，并且此时也可以有一个匿名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 slot="my-header">我是头部</p>
<p>测试内容1</p>
<p>测试内容2</p>
<p>测试内容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:'我是父组件的数据'
}
},
template:'#aaa',
components:{
'bbb':{
template:`
<div class="child">
<p>子组件</p>
<slot name="my-header">我是头部默认值</slot>
<slot name="my-body">我是正文默认值</slot>
<slot></slot>
<slot name="my-footer">我是尾部默认值</slot>
</div>
`,
}
}
}
}
});
</script>
</body>
</html>
网友评论