defineEmits update

• 子组件向父组件事件传递和父子组件之间的双向数据绑定

defineEmits update：用法

update:modelValue

• 在Vue 3中，emit('update:modelValue')的作用是触发一个名为update:modelValue的自定义事件。
• 这个事件通常用于实现父子组件之间的双向数据绑定。
• 子组件接收父组件传过来的值 然后通过computed get set 去改变，然后触发update:modelValue自定义事件，去改变父组件的值 这样子父组件就双向绑定了

<!-- Child.vue -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

<!-- 然后，父组件中的 v-model="foo" 将被编译为： -->
<!-- Parent.vue -->
<Child
  :modelValue="foo"
  @update:modelValue="$event => (foo = $event)"
/>

1. 从 Vue 3.4 开始，推荐的实现方式是使用 defineModel()宏：

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>
vue
<script setup>
const firstName = defineModel('firstName')
const lastName = defineModel('lastName')
</script>

<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>


<script setup>
defineProps({
  firstName: String,
  lastName: String
})

defineEmits(['update:firstName', 'update:lastName'])
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit('update:firstName', $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit('update:lastName', $event.target.value)"
  />
</template>

<template>
  <div class="child-con">
    <p>我是子组件2</p>
    <button @click="toParentEmits">点击传到父组件</button><br>
    子组件输入框name<input v-model="name" placeholder="输入姓名" @input="changeName(name)" />
    子组件输入框age<input v-model="age" placeholder="输入姓名" @input="changeAge(age)" />

  </div>
</template>
<script setup lang="ts">
import {ref,defineEmits,computed } from "vue";
//第一步先定义
const childValue = ref("我是子组件的值childValue")
const emits = defineEmits(['update:name','update:age','getChild']);

const props = defineProps({
  name: { type: String, default: "张三" },
  age: { type: Number, default: 18 }
})
const name = computed({
  get: () => props.name,
  set: (val) => {
    emits('update:name', val)
  }
})
const age = computed({
  get: () => props.age,
  set: (val) => {
    emits('update:age', val)
  }
})
// 数据双向绑定
const changeName = (val) => {
  emits('update:name', val)
}
const changeAge = (val) => {
  emits('update:age', val)
}
const toParentEmits = () =>{
  //第二步发送值
  emits('getChild',childValue)
}

</script>