子組件

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