一、插槽
1、格式
放在子组件
<slot>内容</slot>2、内容
可以放任何模块的代码
3、原理
父组件引用时，填写内容会被应用到插槽
css模块
<style>
.box{
width: 200px;
height: 200px;
background-color: aqua;
float: left;
margin-right: 20px;
}
</style>html模块
<body>
<div id="app">
<cpn>
<a href="">点击</a>
</cpn>
<cpn>
<button>点击</button>
</cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<div class="box">
<h1>{{msg}}</h1>
<slot>
<h4>默认内容</h4>
</slot>
</div>
</div>
</template>
<script>
new Vue({
el:'#app',
components:{
cpn:{
template:'#cpn',
data(){
return{
msg:'子组件'
}
}
}
}
})
</script>
</body>二、具名插槽
1、定义
使用多个插槽时，给slot添加name属性，设置slot名称
2、步骤
（1）<slot>标签添加绑定name属性
（2）便签显示处用<template>标签包裹，并绑定对应的slot，绑定方法如：
①v-slot:插槽名【注意中间是英文冒号，不是等号】
②缩写：#插槽名
<body>
<div id="app">
<cpn>
<template v-slot:slot1>
<div>
<a href="">跳转</a>
</div>
</template>
<template #slot2>
<div>
<a href="">点击</a>
</div>
</template>
</cpn>
<cpn>
<template #slot1>
<div>
<button>点击</button>
</div>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<div class="box">
<slot name="slot1"></slot>
<h1>{{msg}}</h1>
<slot name="slot2"></slot>
</div>
</div>
</template>
<script>
new Vue({
el:'#app',
components:{
cpn:{
template:'#cpn',
data(){
return{
msg:'子组件'
}
}
}
}
})
</script>
</body>