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);
    }
  }
}