vue3相邻组件传值

在Vue 3中，可以使用新的`provide`和`inject` API来实现相邻组件之间的传值。

`provide`和`inject`允许我们在父组件中提供数据，然后在子组件中使用`inject`接收数据。这样就可以实现相邻组件之间的传值。

下面是一个简单的例子：

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

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

const key = Symbol();

const ParentComponent = {
  setup() {
    const data = 'Hello, world!';

    provide(key, data);

    return { data };
  },
  template: '<div><slot></slot></div>'
};

const ChildComponent = {
  setup() {
    const data = inject(key);

    return { data };
  },
  template: '<div>{{ data }}</div>'
};

export default {
  components: {
    ParentComponent,
    ChildComponent
  }
};
</script>

在这个例子中，`ParentComponent`提供了数据，并使用`provide` API将数据绑定到一个唯一的标识符`key`上。然后，`ChildComponent`使用`inject` API来获取这个数据。

这样就可以实现相邻组件之间的传值了。需要注意的是，`provide`和`inject`是基于上下文实现的，所以需要确保父组件在子组件之前渲染。