Vue 封装Input组件 双向通信

子组件

<template><div class="box"><div class="box-left"><input @blur="handleBlur"  v-model="localInput" class="box-left-input"> </div><div class="box-right"><p style="font-size: 10px;margin-left: 10px">{{ unit }}</p></div></div>
</template><script>module.exports = {data() {return {//初始进行一个赋值localInput: this.defaultInputValue}},props: {//父将数据传过来defaultInputValue: {type: [String, Number],default: 0,},unit: {type: String,default: '℃',},//父传过来的失焦方法onBlur: {type: Function,default: null}},watch: {//监听输入框的变化 输入框一变化就将新值传给父localInput(val) {this.$emit('update:defaultInputValue', val)},//当父修改了defaultInputValue这个数据 同步输入框的内容defaultInputValue(val) {this.localInput = val}},methods:{handleBlur(event) {// 如果父组件传入了 onBlur 方法，则调用if (this.onBlur && typeof this.onBlur === 'function') {this.onBlur(event.target.value, event);}// 触发默认的 blur 事件this.$emit('blur', event.target.value, event);}}
};
</script>

父组件调用

<h-input 
:default-input.sync="waterPressureSet" 
@blur="handlePressureChange" :unit="'MPa'"></h-input><h-input :default-input-value.sync="waterPressureSet" @blur="handlePressureChange" :unit="'MPa'"></h-input>data(){return{waterPressureSet:0,}
},
methods:{handlePressureChange(val){//这里的val返回的当输入框失去焦点的时候的数据console.log(val)}
}

1. 没有 .sync 时（单向数据流）：

通常，Vue 遵循单向数据流：父组件通过 prop 向子组件传递数据，子组件通过 事件 向父组件通知变化。

2. 使用 .sync 时（语法糖）：

.sync 是一个语法糖，它自动帮你完成了上面那套“接收prop + 监听事件”的模板代码。

<h-input :default-input-value.sync="waterPressureSet" :unit="'MPa'"></h-input>

等价于：

<h-input :default-input-value="waterPressureSet" @update:defaultInputValue="waterPressureSet = $event":unit="'MPa'">
</h-input>

3. 子组件的要求：

为了让 .sync 正常工作，子组件 必须 在想要更新属性值时触发一个特定格式的事件：

• 事件名必须为：update:${propName}

• 其中 propName 是你用 .sync 绑定的属性名（这里是 default-input-value，在JS中会被转换为驼峰命名 defaultInputValue）

export default {props: ['defaultInputValue', 'unit'],methods: {onInputChange(newValue) {// 当输入值改变时，触发事件来更新父组件的值this.$emit('update:defaultInputValue', newValue);}}
}