原来vue的v-model还能这么用

前言

大家都知道vue中的v-model是用来双向绑定,绑定input,textarea,select等元素上的数据,但是其本质仅仅是语法糖。是监听用户的输入事件用来更新数据,但是本片文章则不是来说这些大家都知道的东西,我们来讲讲你忽略的组件上的v-model。

为什么会发现这么个东西,其实就是在公司里面每周分享的时候,我们的老大在看api的时候发现的,然后我就写了个demo感受了一下,发现真的确实蛮好使,以前自己也遇到过这个问题,但是都是用的最原本的方式,通过这个更让我知道了文档的重要性,很多不仔细看的东西确实是超级有用有木有!尤其是文档。

言归正传!

组件上使用v-model

v-model其实是可以在组件上使用的,而且适用范围还是挺广的,尤其是在我们写组件的时候,相信很多人都有过在父组件展示一个子组件的行为,但是子组件里面有关闭整个组件的功能,我们所做的就是在子组件当中通过$emit触发父组件对应的方法,改变父组件上v-if对应的变量控制显示隐藏。

但是有了v-model,这一切都变得很简单,最主要的是完全少了自定义对外暴露的关闭的方法,如果你关闭之后需要回调,那么通过监听你的是否显示的flag即可,所以大可放心使用。

上干货

首先我们先搞一个父组件,随便来一个简单的!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
<div id="app">
<HelloWorld v-model="showFlag" v-if="showFlag"></HelloWorld>
<button @click="showFlag=true">打开组件</button>
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
name: 'App',
data(){
return {
showFlag: false
}
},
components: {
HelloWorld
}
}
</script>

简单说明一下,这里我们引入了我们的子组件HelloWorld,通过showFlag来控制组件的显示隐藏,当然,组件上还用v-model绑定了showFlag,那么我们就来看看子组件是如何搞的吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
<div class="hello">
<h1>这是组件里面的内容</h1>
<button @click="close">关闭组件</button>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: {
type: Boolean
}
},
methods: {
close(){
this.$emit('change', false)
}
}
}
</script>

对于子组件来说,允许自定义使用v-model时定制prop和event,v-model中的prop就是把value用作prop,input用作event,但是为了避免冲突,我们使用model的选项可以回避这些冲突,当然,你也得使用props声明checked这个prop。

扩展

当然,你做的肯定不仅仅是显示隐藏这么简单,你也可以使用此种方式对外传输数据,也就是通过这个$emit的change事件,实现数据的双向绑定,而且在父组件不需要新增方法,是不是很方便。

联想

可能许多小伙伴是知道这个功能的,但是我自己对于vue的官方文档说到底还是不熟悉居多,主要是使用的一般都是通用的功能,对于这些不常使用的自己也确实是不够注意,总之还是一句话,多看文档吧骚年!

小伙子别走,如果帮到您你懂得☺
0%