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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值