插槽的基本使用:
组件中的插槽能使组件具有更高的扩展性。它能够抽取共性,保留不同,将共性的内容封装到组件中,不同的内容通过预留插槽的方式,留下可扩展的空间。
接下来通过一个简单的案例加以说明:
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>子组件</h2>
<p>插槽的使用方法</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data(){
return {
message:'Hello'
}
},
components:{
cpn:{
template:'#cpn',
}
}
})
</script>
以上代码中定义了一个子组件,通过<cpn></cpn>在Vue实例中调用了四次,运行结果如下:
现提出如下需求:为各个组件插入不同的标签
修改代码如下:
<div id="app">
<cpn></cpn>
<cpn><span>span标签</span></cpn>
<cpn><input type="text" value="input标签"></cpn>
<cpn><button>button按钮2</button></cpn>
</div>
<template id="cpn">
<div>
<h2>子组件</h2>
<p>插槽的使用方法</p>
<!-- 预留插槽位置 在Vue实例中不指定插入标签时,显示默认标签-->
<slot><button>默认按钮</button></slot>
</div>
</template>
运行结果如下:
插槽的基本使用:组件中<slot></slot>
插槽设置默认值<slot><button>默认按钮<button></slot>
如果有多个值同时放入组件进行替换时,一起作为替换元素
具名插槽的使用:
1.为组件插槽起名字:name="name";
2.使用时指定插槽:<cpn><button slot="name"> 按钮</button></cpn>。
示例如下:
<div id="app">
<cpn>
<input type="text" value="input标签" slot="center">
<span slot="left">标题</span>
<button slot="right">按钮</button>
</cpn>
</div>
<template id="cpn">
<div>
<p>具名插槽的使用</p>
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
作用域插槽的使用:如何在父组件中拿到子组件中的数据进行展示 。
- 插槽绑定data属性<slot :data="datas"></slot>
- 父组件中拿到数据:<cpn><template slot-scope="slot">{{slot.data}}</template></cpn>
案例:
<div id="app">
<cpn ></cpn>
<cpn >
<!-- 获取子组件中的值 -->
<template slot-scope="slot">
<span v-for="item in slot.data">{{item}} - </span>
</template>
</cpn>
<cpn >
<template slot-scope="slot">
<span v-for="item in slot.data">{{item}} ** </span>
</template>
</cpn>
<cpn >
<template slot-scope="slot">
<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="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data(){
return {
message:'hello',
isShow:true
}
},
components:{
cpn:{
template:'#cpn',
data(){
return {
pLanguages:['JavaScript','Python','Swift','Go','C++','C#']
}
}
}
}
})
</script>
运行结果: