Vue之model属性

1、组件上使用v-model

官网解释：允许一个自定义组件在使用 v-model 时定制 prop 和 event。

默认情况下，一个组件上的 v-model 会把 value 用作 prop 

且把 input 用作 event，

但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。

使用 model 选项可以回避这些情况产生的冲突。

简单来讲就是将组件实现数据双向绑定的效果，

需要注意的是自定义组件字眼表明其主要的使用场景是在组件内部，

后面的那一大段是说明缘由的。

2、组件上使用v-model

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

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

3、父组件

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

4、子组件

<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。

5、扩展

当然，你做的肯定不仅仅是显示隐藏这么简单，

你也可以使用此种方式对外传输数据，也就是通过这个$emit的change事件，

实现数据的双向绑定，而且在父组件不需要新增方法，是不是很方便。