setup 语法 实现子传父 vue3

在 Vue 3 中，可以通过使用 `provide` 和 `inject` 来实现子组件向父组件传递信息。

1. 在父组件中使用 `provide` 来提供一个变量或函数。

<template>
  <div>
    <h2>Parent component</h2>
    <ChildComponent />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const message = 'Hello from parent component';
    // 提供 message 给子组件
    provide('message', message);
  },
};
</script>

2. 在子组件中使用 `inject` 来获取父组件中提供的变量或函数。

<template>
  <div>
    <h3>Child component</h3>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  setup() {
    // 获取父组件提供的 message 变量
    const message = inject('message');
    return { message };
  },
};
</script>

完整代码如下：

<template>
  <div>
    <h2>Parent component</h2>
    <ChildComponent />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const message = 'Hello from parent component';
    // 提供 message 给子组件
    provide('message', message);
  },
};
</script>

<template>
  <div>
    <h3>Child component</h3>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  setup() {
    // 获取父组件提供的 message 变量
    const message = inject('message');
    return { message };
  },
};
</script>

运行结果为：

Parent component
Child component
Hello from parent component