在组件上使用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的值了

阅读更多
个人分类: Vue
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭