中山网站建设中山,网站攻击方式,做电影网站多少钱,营销设计网站建设问题#xff1a; 使用第三方 vue3-tel-input电话组件时#xff0c;通过v-model绑定具有初始值的电话变量#xff0c;但input框内显示的初始值为空#xff1f; 排查过程#xff1a;
将 v-model绑定改为 :value绑定后#xff0c;电话变量初始值竟然能够显示在vue3-tel-inp…问题 使用第三方 vue3-tel-input电话组件时通过v-model绑定具有初始值的电话变量但input框内显示的初始值为空 排查过程
将 v-model绑定改为 :value绑定后电话变量初始值竟然能够显示在vue3-tel-input组件上绑定有自定义的 input 事件vue3-tel-input组件的子组件暴露了 value属性和 e m i t ( ′ i n p u t ′ , v a l u e , t h i s . p h o n e O b j e c t , t h i s . emit(input, value, this.phoneObject, this. emit(′input′,value,this.phoneObject,this.refs.input) 的触发事件 以触发父类通过 input绑定的方法逻辑。查看 vue3-tel-input子组件源码并没有定义 modelValue属性和 update:modelValue触发事件。
知识点解析
v-model 为vue语法糖绑定在 input和组件上编译后的等价展开不同。 绑定在input元素编译后为 :value和 input的组合。input提供了默认实现。绑定在组件上编译后为 :modelValue和 update:modelValue事件。update:modelValue提供了默认实现。
********************绑定在input上*************************
编译前
input v-modelformModel.phoneNumber /
编译后
input:valueformModel.phoneNumberinputformModel.phoneNumber $event.target.value
/********************绑定在组件上*************************
编译前
vue-tel-input v-modelvalue
编译后
vue-tel-input:modelValueformModel.phoneNumberupdate:modelValuenewValue formModel.phoneNumber newValue
/属性绑定的变量值只会单向传递例如通过 :value和 :modelValue如果没有额外的触发事件即子组件中值的变化不会影响到父组件通过 :value和 :modelValue绑定变量的值。
解决方案
方案一 使用v-model绑定。优点在于简单通过默认的input触发事件可以实现双向数据绑定也可以自定义input事件 缺点在于vue3-tel-input子组件内没有modelValue属性没有默认实现默认值渲染。适合于没有默认值的场景。方案二 通过 :value 和自定义 input事件进行变量绑定和数据更新操作逻辑。由于组件内已经暴露 value属性所以能够实现默认值渲染也可以自定义input事件逻辑灵活性高适合有默认值的场景。
