第二章-漕运龙舟v-model - 运河闸口双向控制秘法

一、漕运通衢之要——双向水闸原理（v-model本质解析）

<!-- 圣祖爷御批的双向闸口控制系统 -->
<template>
  <div class="qing-dynasty-canal">
    <!-- 南闸口：御笔朱批数据入口 -->
    <imperial-input 
      v-model="waterLevel" 
      :max="九丈八尺" 
      @dragon-boat-pass="logNavigation"
    ></imperial-input>
    <!-- 水文监测龙鳞牌 -->
    <dragon-scale 
      :current="waterLevel" 
      :prev="prevLevel"
    ></dragon-scale>
    <!-- 北闸口：漕运数据出口 -->
    <canal-output 
      v-model="waterLevel"
      @tribute-updated="updateImperialLedger"
    ></canal-output>
  </div>
</template>
<script>
export default {
  data() {
    return {
      waterLevel: 三丈六尺, // 初始水位（响应式数据源）
      prevLevel: 零
    }
  },
  mounted() {
    this.prevLevel = this.waterLevel // 初始化先帝水位记录
  }
}
</script>

二、龙骨传动机关拆解（Object.defineProperty原理）

// 工部水文监控密卷（数据劫持实现）
const canalSurveillance = {
  _waterFlow: 五百石,
  get currentFlow() {
    console.log('【密奏】当前漕运流量：', this._waterFlow)
    return this._waterFlow
  },
  set currentFlow(value) {
    console.log('【圣旨】调整漕运为：', value)
    this._waterFlow = value
    this.notifyJiangnanProvince() // 触发江南布政使更新
  }
}
// Proxy新式河道测绘（Vue3响应式原理）
const imperialObserver = new Proxy(canalSurveillance, {
  set(target, key, value) {
    console.log('【军机处急报】修改航道参数:', key)
    return Reflect.set(target, key, value)
  }
})

三、八旗传令体系（事件驱动模型）

<!-- 正黄旗驿站传信系统 -->
<input 
  :value="tributeRice" 
  @input="$emit('tribute-change', $event.target.value)"
>
<!-- 等价于 -->
<input v-model="tributeRice">

四、漕运密令符咒（修饰符妙用）

钦命符咒	漕运功效	Vue对应
.lazy	节流省马力，三日一报	输入防抖
.number	确保漕粮数为玉衡之数	强制数字类型
.trim	削去漕粮袋封口绳头	去除首尾空格

<template>
  <!-- 缓报密折箱 -->
  <memorial-box v-model.lazy="emergencyReport"></memorial-box>
  
  <!-- 户部银两统计 -->
  <treasury-input v-model.number="silverTaels"></treasury-input>
</template>

五、多级船闸联控（组件间v-model联动）

<template>
  <div class="grand-canal-system">
    <!-- 通州闸 -->
    <beijing-lock 
      v-model="waterLevel"
      @flood-warning="activateAlarm"
    ></beijing-lock>
    
    <!-- 扬州闸 -->
    <yangzhou-lock 
      :value="waterLevel"
      @input="waterLevel = $event"
    ></yangzhou-lock>
  </div>
</template>

六、漕运律例（注意事项）

1. 不可直修御赐黄马褂（禁止直接修改props）
2. 复杂河道用.sync通关文牒（复杂对象用.sync）
3. 夜航需掌琉璃灯（异步操作需async/await）