插槽 - slot
优点:可以预留空间,提高组件的复用性;
1.插槽的基本使用
html代码如下:
<div id="app">
<!--将h4标签中的内容替换到插槽中 -->
<you><h4>替换的h4标签</h4></you>
<!--不在插槽中添加值时,插槽会使用默认值 -->
<you></you>
</div>
<template id="cpn">
<div>
<h2>slot-插槽的基本使用</h2>
<!--在slot标签中,可以写入默认值-->
<slot><div>设置slot默认值</div></slot>
</div>
</template>
js代码如下:
<script src="../../vue.js/vue.min.js"></script>
<script>
const mv = new Vue({
el: '#app',
data:{
},
components:{
you: {
template: '#cpn',
}
}
})
</script>
运行结果:
2.具名插槽的使用
当一个组件中需要定义多个插槽时,就需要用到具名插槽。
具名插槽:
- 需要在slot标签中添加 name属性,属性值任意写;
- 在引用组件时,通过添加 slot = “属性值” 来关联对应的插槽。
运行结果如下:
html代码如下:
<div id="app">
<you>
<span slot="aaa">aaa的具名插槽</span>
<button slot="bbb">bbb的具名插槽</button>
<em slot="ccc">ccc的具名插槽</em>
</you>
</div>
<template id="cpn">
<div>
<h3>slot-具名插槽的使用</h3>
<slot name="aaa"></slot>
<slot name="bbb"></slot>
<slot name="ccc"></slot>
</div>
</template>
js代码如下:
<script src="../../vue.js/vue.min.js"></script>
<script>
const mv = new Vue({
el: '#app',
data:{},
components:{
you:{
template: '#cpn',
}
}
})
3.作用域插槽
使用方法:
步骤1:在子组件中通过** v-bind:参数1 = “参数2” **定义;
步骤2:在调用子组件时,在template标签中加入 slot-scope=“slot” 语句;
步骤3:之后就可以通过 slot.参数1 进行访问。
参数1:自定义名称, 参数2:子组件中被访问数据的名称。
eg:需求:访问子组件中 planguages:[‘JavaScript’,‘Python’,‘C++’,‘Go’],通过水平数据显示、列表显示。
html代码如下:
<div id="app">
<!-- 水平显示-->
<you>
<template slot-scope="slot">
<!--join()函数:将数组中的数据通过某种方式进行链接-->
<span>{{ slot.jun.join(' - ')}}</span>
</template>
</you>
<!--默认列表显示-->
<you></you>
<template id="cpn">
<div>
<slot :jun="pLanguages">
<ul>
<li v-for="item in pLanguages">{{ item }}</li>
</ul>
</slot>
</div>
</template>
js代码如下:
<script src="../../vue.js/vue.min.js"></script>
<script>
const mv = new Vue({
el: '#app',
data:{},
components:{
you: {
template:'#cpn',
data(){
return{
pLanguages:['JavaScript','Python','C++','Java','Go']
}
}
}
}
})
</script>
运行代码如下: