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

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

 

前言

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

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

言归正传！

组件上使用v-model

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

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

上干货

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

<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，那么我们就来看看子组件是如何搞的吧。

<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)
    }
  }
}

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

扩展

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

联想

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