在组件上使用v-model实现双向绑定

文档解释：

https://cn.vuejs.org/v2/guide/components.html#在组件上使用-v-model

个人总结：

主要是给组件定义一个名叫value的prop，组件修改值时需要使用**$emit(“input”, value)** ，不能直接修改value。

复杂一点的需求：

在开发项目中遇到过这样的情况：
组件拿到value后并不是直接进行使用，还需要经过处理（比如是一个有着横杠的字符串，需要对横杠分割成两个值），当时使用了computed实现：

computed: {
    watchValueProp () {
      const arr = this.value.split('-')
      this.code = arr[0]
      this.pwd = arr[1]
    }
}

之后为了让computed能被执行，需要在template中任意地方加入 {{ watchValueProp }} 。这样就实现了组件绑定到外部。
外部绑定到组件只需在组件内调用：

this.$emit('input', this.code + '-' + this.pwd)

然后外部只需v-model="value"的形式即实现了双向绑定。

但这里会有个问题：假设computed内用到了别的data值，如果那个data值被改变，则同样也会触发computed的代码。这可能并不是我们想要的，那么这个时候就需要用watch来单独观察value的值了