1、slot的基本使用
<div id="app">
<!-- 1.默认情况 -->
<cpn></cpn>
<!-- 2.自定义情况 -->
<cpn><i>iii</i></cpn>
<!-- 3.自定义多条情况 -->
<cpn>
<i>呵呵呵</i>
<button type="button">按钮</button>
</cpn>
</div>
<template id="cpn">
<div id="">
<h2>我是组件</h2>
<h3>我是组件</h3>
<!-- 可以在插槽里指定默认的值 -->
<slot><button type="button">按钮</button></slot>
</div>
</template>
2、具名插槽的使用
<div id="app">
<cpn>
<!-- 未命名时替换 -->
<span>替换</span>
<!-- 命名了，替换相对应命名的 -->
<span slot="center">替换2</span>
</cpn>
</div>
<template id="cpn">
<div>
<slot>hahaha</slot>
<slot name="left">左边</slot>
<slot name="center">中间</slot>
<slot name="right">右边</slot>
</div>
</template>
3、组件的作用域
组件里出现的变量只会在本组件的data中去引用（父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译）
<body>
<div id="app">
<cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
<div>
<h2>组件</h2>
<button v-show="isShow">
div
</button>
</div>
</template>
<script src="../vue/vue.js" type="text/javascript"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
message:'你好啊',
isShow:true
},
components:{
cpn:{
template:'#cpn',
data(){
return{
isShow:true
}
}
},
}
})
</script>
4、作用域插槽
当父组件对子组件中展示的数据不满意，重构数据时采用
父组件替换插槽的标签，但是内容由子组件来提供
<body>
<div id="app"><cpn>
<!-- 目的是获取子组件中的planguages -->
<template slot-scope="slot">
<!-- <span v-for="item in slot.data">{{item}} *</span> -->
<span>{{slot.data.join(' - ')}}</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="../vue/vue.js" type="text/javascript"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
message:'你好啊'
},
components:{
cpn:{
template:'#cpn',
data(){
return{
pLanguages:['Java','JavaScript','C','C#']
}
}
}
}
})
</script>
</body>
