揭秘Vue3 v-model中的鲜为人知的神奇用法

2023-10-19 10:34:31

Vue3 v-model的常规用法

在Vue3中，v-model指令主要用于实现表单元素的双向绑定。通过v-model指令，你可以将表单元素的值绑定到Vue实例的数据上，当表单元素的值发生变化时，Vue实例的数据也会随之更新。反之，当Vue实例的数据发生变化时，表单元素的值也会随之更新。

<input v-model="name">

上面的代码将表单元素<input>的值绑定到Vue实例的name数据上。当用户在<input>元素中输入值时，name数据的值也会随之更新。反之，当name数据的值发生变化时，<input>元素中的值也会随之更新。

鲜为人知的神奇用法

除了常规用法之外，v-model指令还有一些鲜为人知但非常实用的语法。这些语法可以帮助你更轻松地实现各种表单操作和数据绑定。

1. 在子组件中使用v-model

在Vue2中，将方法绑定在一级子组件上后，一级子组件引入二级子组件，在子组件上通过v-on绑定$listeners，这样二级子组件就可以直接调用父组件的方法。注意注意！！在Vue3中移出了$listeners，但是并不代表调用方法消失了，在官方文档中，调用绑定方法被合并到了$attrs和$emit中。

<!-- 父组件 -->
<template>
  <ChildComponent v-bind="$attrs" @update-name="updateName" />
</template>

<script>
export default {
  methods: {
    updateName(name) {
      this.name = name;
    }
  }
};
</script>

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

<script>
export default {
  props: ['name'],
  emits: ['update-name']
};
</script>

在上面的代码中，ChildComponent组件通过v-bind="$attrs"将父组件传递过来的属性绑定到自身。当ChildComponent组件中的<input>元素的值发生变化时，会触发input事件，然后通过$emit('update-name', $event.target.value)将新值发射给父组件。父组件收到新值后，会调用updateName方法更新自己的name数据。