01 插槽的基本使用
<body>
<!-- 组件的插槽是为了封装的组件更加具有扩展性 -->
<!--
1.插槽的基本使用 组件中声明<slot></slot>
2.插槽的默认值 组件中使用 <slot><button>案例</button></slot>
3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
-->
<div id="app01">
<cpn></cpn>
<cpn><a href="www.baidu.com">我可以替换组件中的默认插槽</a></cpn>
<cpn>
<h3>多个值替换，同时放入到组件中替换插槽</h3>
<h4>多个值替换，同时放入到组件中替换插槽</h4>
<h5>多个值替换，同时放入到组件中替换插槽</h5>
</cpn>
</div>
<template id="cpn">
<div>
<h3>我是组件</h3>
<p>哈哈哈</p>
<slot><button>我是默认按钮</button></slot>
</div>
</template>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let app = new Vue({
el:"#app01",
data:{
message:‘hello world‘
},
components:{
cpn:{
template:"#cpn"
}
}
})
</script>
02 具名插槽
<body>
<div id="app01">
<cpn><span slot="right">标题</span></cpn>
<cpn><button slot="middle">按钮</button></cpn>
</div>
<template id="cpn">
<div>
<slot name="left"><span>左边</span></slot>
<slot name="middle"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let app = new Vue({
el:"#app01",
data:{
message:‘hello world‘
},
components:{
cpn:{
template:"#cpn"
}
}
})
</script>
03 编译作用域概念
解释：此处div id="app01" 模块中使用了组件cpn，可以当做基本的div来看待，使用的isShow会从Vue实例中取值
组件div中button中使用的isShow取自身组件中的isShow的值
<body>
<div id="app01">
<cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
<div>
<h3>我是组件</h3>
<p>哈哈哈哈</p>
<button type="button" v-show="isShow">按钮</button>
</div>
</template>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let app = new Vue({
el:"#app01",
data:{
message:‘hello world‘,
isShow:true
},
components:{
cpn:{
template:"#cpn",
data(){
return {
isShow:false
}
}
}
}
})
</script>
原文：https://www.cnblogs.com/ethnic/p/14946498.html