vue3子组件向父组件传值不用触发事件

在 Vue 3 中，子组件向父组件传值可以通过使用 `provide` 和 `inject` 来实现，而不需要触发事件。以下是一种常见的方法：

1. 在父组件中，使用 `provide` 提供一个值给子组件。例如：

// 父组件
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const valueToPass = '这是传递给子组件的值';
    provide('valueToPass', valueToPass);
  }
}
</script>

2. 在子组件中，使用 `inject` 来获取父组件提供的值。例如：

// 子组件
<template>
  <div>
    <p>从父组件接收到的值：{{ receivedValue }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const receivedValue = inject('valueToPass');
    return {
      receivedValue
    };
  }
}
</script>

通过以上步骤，子组件可以通过 `inject` 获取到父组件提供的值，而不需要触发事件来传递数据。注意，在使用 `provide` 和 `inject` 时，需要保证提供和注入的键名一致，以确保正确地传递和接收数据。