vue3中 子组件-＞父组件 传递数据 customEvent 和 update:modelValue的区别

主要区别：

defineEmits(['customEvent']) 需要在父组件中添加处理程序handler，defineEmits(['update:modelValue']); 不需要显式地在父组件中添加处理程序handler

<!-- 父组件（ParentComponent.vue） -->

<template>
  <div>
    <ChildComponent @customEvent="handleCustomEvent" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

// 事件处理程序 event handler
const handleCustomEvent = (data) => {
  console.log('Received from Child:', data);
};
</script>

 

<!-- 子组件（ChildComponent.vue） -->

<template>
  <div>
    <button @click="sendToParent">Send to Parent</button>
  </div>
</template>

<script setup>
const emit = defineEmits(['customEvent']);

const sendToParent = () => {
  emit('customEvent', 'Hello from Child');
};
</script>

==============

<!-- 父组件（ParentComponent.vue） -->

<template>
  <div>
    <InputComponent v-model="inputValue" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import InputComponent from './InputComponent.vue';

// v-model 双向绑定，无需显式写event handler
const inputValue = ref('');
</script>

<!-- 子组件（ChildComponent.vue） -->

<template>
  <div>
    <input :value="modelValue" @input="updateValue" />
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  modelValue: {
    type: String,
    required: true
  }
});
const emit = defineEmits(['update:modelValue']);

const updateValue = (event) => {
  emit('update:modelValue', event.target.value);
};
</script>