vue3父子组件事件传递

Vue3中父子组件之间的事件传递可以通过自定义事件和v-model指令实现。

1. 自定义事件：子组件可以通过$emit()方法触发自定义事件，并将需要传递给父组件的数据作为参数传递，父组件可以通过v-on指令监听子组件触发的事件并接收数据。

2. v-model指令：v-model指令可以用于在父子组件之间双向绑定数据，子组件通过$emit('update:modelValue', data)触发更新事件，父组件可以通过v-model指令监听该事件并更新相应的数据。

示例代码如下：

父组件：

<template>
  <div>
    <ChildComponent v-model="message" @custom-event="handleCustomEvent" />
    <p>父组件中的message：{{ message }}</p>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      message: '',
    };
  },
  methods: {
    handleCustomEvent(data) {
      console.log('自定义事件触发，接收到子组件传递的数据：', data);
    },
  },
};
</script>

子组件：

<template>
  <div>
    <input type="text" v-model="localMessage" />
    <button @click="handleClick">发送自定义事件</button>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: '',
    },
  },
  emits: ['custom-event', 'update:modelValue'],
  data() {
    return {
      localMessage: this.modelValue,
    };
  },
  methods: {
    handleClick() {
      const data = { message: this.localMessage };
      this.$emit('custom-event', data);
      this.$emit('update:modelValue', this.localMessage);
    },
  },
};
</script>