Vue 3 子组件向父组件传值：两种方法详解

在 Vue 3 中，子组件向父组件传值可以通过两种方式实现：

使用$emit方法：子组件可以通过调用$emit方法触发一个自定义事件，并传递需要传递给父组件的值。父组件可以在模板中使用v-on指令监听这个自定义事件，并在对应的事件处理函数中获取传递的值。

子组件示例：

<template>
  <button @click="emitValue">传递值给父组件</button>
</template>

<script>
export default {
  methods: {
    emitValue() {
      this.$emit('value', '传递的值');
    }
  }
}
</script>

父组件示例：

<template>
  <div>
    <child-component @value="handleValue"></child-component>
    <p>接收到的值：{{ receivedValue }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedValue: ''
    }
  },
  methods: {
    handleValue(value) {
      this.receivedValue = value;
    }
  }
}
</script>

使用provide和inject：父组件可以使用provide选项提供一个值，然后在子组件中使用inject选项接收这个值。这样子组件就可以直接访问父组件提供的值。

父组件示例：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  setup() {
    const value = '传递的值';
    provide('value', value);
  }
}
</script>

子组件示例：

<template>
  <div>
    <p>接收到的值：{{ receivedValue }}</p>
  </div>
</template>

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

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

这里需要注意的是，使用provide和inject方式传递值时，不需要显式地在模板中使用v-on监听事件，子组件可以直接在setup函数中使用inject获取父组件提供的值。