Vue3中on开头的props默认绑定事件初探

2024-01-12 17:09:25

Vue 3 中的事件绑定：on 开头的 props 的默认绑定

在 Vue 3 中，以 on 开头的 props 默认绑定到组件的根元素上。这意味着如果未显式声明事件处理程序，组件根元素上的事件将被传播到该 prop。这可能会导致意外的行为，尤其是当 props 旨在由子组件处理时。

代码示例：意外的行为

考虑以下 Vue 3 组件：

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

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  },
};
</script>

如果在使用该组件时未指定 value prop，当用户在输入框中键入内容时，组件的 value prop 将不会更新。这是因为 value prop 已绑定到组件的根元素，而不是输入框元素。

应对策略

为了避免这种情况，可以使用以下策略：

1. 在组件中声明 on 开头的 props

在组件的 props 选项中声明 on 开头的 props 可以确保它们不会被默认绑定：

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

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    // 声明 onInput 事件处理程序
    onInput: {
      type: Function,
      default: () => {},
    },
  },
};
</script>

2. 使用 v-on 指令显式绑定事件

使用 v-on 指令可以显式地将事件绑定到特定元素：

<template>
  <input v-on:input="onInput">
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  methods: {
    // 定义 onInput 方法
    onInput() {
      console.log('onInput');
    },
  },
};
</script>

3. 使用 .native 修饰符阻止事件绑定

.native 修饰符可用于阻止事件的默认绑定行为：

<template>
  <input v-model="value" @input.native="onInput">
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  methods: {
    // 定义 onInput 方法
    onInput() {
      console.log('onInput');
    },
  },
};
</script>