【Vue.js 3.0】 emit(“update:modelValue“) 双向绑定

在Vue 3中，emit('update:modelValue')的作用是触发一个名为update:modelValue的自定义事件。这个事件通常用于实现父子组件之间的双向数据绑定。

当子组件需要将一个值传递给父组件，并且希望父组件能够更新这个值时，可以使用emit('update:modelValue', newValue)。

通过这种方式，子组件可以将newValue作为参数传递给update:modelValue事件，父组件监听该事件，并在事件处理程序中更新相应的属性。

这样，当子组件的值发生变化时，父组件的值也会自动更新，实现了双向数据绑定的效果。

eg： 在一个自定义的输入组件中，你可以使用emit('update:modelValue', newValue)来将输入框的值传递给父组件，并让父组件能够更新这个值。

在父组件中

<template>
  <TestCom v-model="name" v-model:age="age"></TestCom>
  <h1>名字: {{ name }}</h1>
  <h1>年龄: {{ age }}</h1>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import TestCom from './components/TestCom.vue'
  const name = ref(null);
  const age = ref(null);
</script>

在子组件中

<template>
  <input v-model="message_name" placeholder="输入姓名" @input="changeName(message_name)" />
  <input v-model="message_age" placeholder="输入年龄" @input="changeAge(message_age)" />
</template>
<script setup>
import { ref, watch } from 'vue';
// 此处引入
const emit = defineEmits(['update:modelValue', 'update:test2'])
const props = defineProps({
  // 父组件 v-model 没有指定参数名，则默认是 modelValue
  modelValue: {
    type: String,
    default: 'lqy'
  },
  age: {
    type: Number,
    default: 28
  }
})

let message_name = ref(null)
let message_age = ref(null)
// PS: 具体业务逻辑需要在 props.modelValue 变化时执行其他操作，你可能需要重新添加监听代码。但根据你提供的信息，删除这行代码并没有影响组件的功能。
// watch(() => props.modelValue, () => { message_name.value = props.modelValue })
// watch(() => props.age, () => { message_age.value = props.age })


// 数据双向绑定
const changeName = (msg) => {
  emit('update:modelValue', msg)
}
const changeAge = (msg) => {
  emit('update:age', msg)
}
</script>