@update 的常见用法 Vue.js

news2025/3/4 20:13:22

在 Vue.js 中，@update 是一个事件监听器，通常用于监听自定义组件或某些 Vue 原生组件（如 <input> 或自定义组件）的更新事件。它并不是 Vue 的核心 API，而是一种约定俗成的命名方式，用于处理组件内部状态更新时触发的事件。

1. `@update` 的常见用法

@update 通常用于父子组件之间的通信。父组件监听子组件的 update 事件，以便在子组件的状态发生变化时执行某些操作。

示例：自定义组件中使用 `@update`

<!-- 子组件：MyComponent.vue -->
<template>
  <div>
    <input v-model="internalValue" @input="handleInput" />
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      internalValue: this.value,
    };
  },
  methods: {
    handleInput() {
      this.$emit('update', this.internalValue); // 触发 update 事件
    },
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal;
    },
  },
};
</script>

<!-- 父组件：ParentComponent.vue -->
<template>
  <div>
    <MyComponent :value="parentValue" @update="handleUpdate" />
    <p>当前值：{{ parentValue }}</p>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      parentValue: '',
    };
  },
  methods: {
    handleUpdate(newValue) {
      this.parentValue = newValue; // 更新父组件的状态
    },
  },
};
</script>

在这个例子中：

子组件通过 $emit('update', newValue) 触发 update 事件。
父组件通过 @update="handleUpdate" 监听子组件的 update 事件，并更新自己的状态。

2. `@update` 与 `v-model` 的关系

在 Vue 中，v-model 是 @input 和 :value 的语法糖。如果你想让自定义组件支持 v-model，可以使用 model 选项或直接使用 v-model 的默认行为。

示例：使用 `v-model` 替代 `@update`

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

<script>
export default {
  props: ['value'],
};
</script>

<!-- 父组件：ParentComponent.vue -->
<template>
  <div>
    <MyComponent v-model="parentValue" />
    <p>当前值：{{ parentValue }}</p>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      parentValue: '',
    };
  },
};
</script>

在这个例子中：