当前位置：首页 > VUE

vue受控实现原理

2026-01-18 20:00:28VUE

Vue 受控组件的实现原理

Vue 中的受控组件通常指表单元素（如 input、select 等）的值由 Vue 的数据状态（data 或 v-model）驱动，而非由 DOM 自身管理。其核心是通过数据绑定和事件监听实现双向同步。

vue受控实现原理

数据绑定与响应式

Vue 通过 v-model 或 :value + @input 实现受控：

vue受控实现原理

v-model 是语法糖，本质上是 :value 绑定和 @input 事件的组合。
表单元素的值由 Vue 的响应式数据（如 data 中的属性）控制，数据变化时自动更新 DOM。

<template>
  <input v-model="message" />
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

事件监听与更新

当用户输入时，Vue 通过事件监听（如 input、change）捕获变化，并同步到数据状态：

v-model 默认监听 input 事件（文本类元素）或 change 事件（复选框等）。
手动实现时需显式绑定 :value 和 @input。

<template>
  <input :value="message" @input="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleInput(e) {
      this.message = e.target.value;
    }
  }
}
</script>

自定义组件中的受控

对于自定义组件，需通过 model 选项和 $emit 实现受控：

使用 model 定义 prop 和 event，替代默认的 value 和 input。
子组件内部通过 $emit 触发事件，父组件更新数据。

<!-- 父组件 -->
<template>
  <CustomInput v-model="message" />
</template>

<!-- 子组件 -->
<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  props: ['value'],
  model: {
    prop: 'value',
    event: 'input'
  }
}
</script>