前言
vue的插槽其实官方文档中的介绍已经很容易看懂了。这里再简单做一下总结。
用处
项目中还是很常需要用到插槽的,比如想抽离一个表单组件,虽然这个表单虽然大部分地方都是一样的,但是还是有个别是不同的,比如页面A中多了一个下拉选择框,这个时候如果想要抽离这个组件就需要用到插槽了。
前段时间写了一个车牌号输入控件,里面的自定义输入框,就是通过插槽实现的。
介绍
插槽可以分为两种类型:
-
具名插槽
定义:通过name来定义,没有定义的则是默认插槽
使用: 通过v-slot来使用,没有通过v-slot的则是使用默认插槽- 需要注意的点
v-slot只有在只存在默认插槽的情况下,才能写在组件标签上,否则只能在组件标签的外围再包裹一层template,然后写在template上。
- 需要注意的点
-
作用域插槽
目的: 为了可以在父模板中访问到子模板的值。因为根据规则,父模板是无法访问子模板的数据的。
具体用法:- 在子模板中通过v-bind绑定一个值, v-bind:name=‘name’
- 在父模板中通过v-slot来获取子模板绑定的值:v-slot=‘name’,当然,如果是具名插槽需要加上名称:v-slot:footer=‘name’
talk is cheap,show me the code。就按上面提到的例子,抽离一个表单组件:
目录结构如下:
这里有两个页面,a和b,抽离组件form。具体代码如下:
// 组件 form
<template>
<div>
<!--
每个页面共有的可以放到插槽外面,或者放到插槽里面作为插槽的默认内容,
但是注意,如果作为插槽默认内容的话,一但插槽有内容那么默认内容是不显示的
-->
<div>
姓名:<input>
</div>
<!-- 默认插槽 -->
<slot></slot>
<!-- 具名插槽 -->
<slot name="footer"></slot>
<!-- 作用域插槽,这里把obj绑定到了value上 -->
<slot name="head" :value="obj"></slot>
</div>
</template>
<script>
export default {
data () {
return {
obj: {
name: '插槽'
}
}
}
}
</script>
// 页面 A
<template>
<div>
<div>page A</div>
<br/>
<cform>
<!-- 因为form组件存在多个插槽,所以这里的v-slot只能写在template上,不能写在cform上 -->
<template v-slot:head="data">
<!-- 这里拿到的就是form组件里面绑定到value上面的obj数据。也就是作用域插槽 -->
作用域插槽,来自子模块中的数据:{{data.value.name}}
</template>
</cform>
</div>
</template>
<script>
import cform from './components/form'
export default {
components: {
cform
},
data () {
return {
}
}
}
</script>
// 页面 B
<template>
<div>
<div>page B</div>
<br/>
<cform>
<!-- 具名插槽 -->
<template v-slot:footer>
<div>
年龄:<input>
</div>
</template>
<!-- 默认插槽 -->
<template>
<div>
性别:<input>
</div>
</template>
<!--
这里虽然具名插槽在前,默认插槽在后,
但是在渲染的时候还是得看form组件里面哪个在前,在前的先渲染
-->
</cform>
</div>
</template>
<script>
import cform from './components/form'
export default {
components: {
cform
},
data () {
return {
}
}
}
</script>
主要代码如上。页面结果如下:
以上是vue插槽的一点总结及实际应用。当然,vue插槽的作用远不止这点,这就需要在项目中灵活运用了。