vue3子组件向爷组件传值

在Vue 3中，子组件向爷组件传值的核心部分是通过`provide`和`inject`来实现。子组件使用`provide`来提供需要传递的值，而爷组件使用`inject`来接收这些值。

具体步骤如下：
1. 在爷组件中，使用`provide`提供一个属性，将需要传递的值作为属性的值。
2. 在子组件中，使用`inject`将该属性注入到组件中，以便访问爷组件提供的值。

以下是一个示例代码：

// 爷组件
<template>
  <div>
    <h1>爷组件</h1>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  setup() {
    // 提供需要传递的值
    provide('message', 'Hello from grandparent!');
  },
};
</script>

// 子组件
<template>
  <div>
    <h2>子组件</h2>
    <div>{{ message }}</div>
  </div>
</template>

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

export default {
  setup() {
    // 注入爷组件提供的值
    const message = inject('message');

    return {
      message,
    };
  },
};
</script>

通过以上代码，子组件可以访问到爷组件提供的值，并在前端页面上展示出来。