vue3组件通信方式那10种方式配合例子解释一下

抱歉，我之前给出的回答有误。在Vue 3中，常见的组件通信方式有以下几种：

1. Props/Attributes（属性）：父组件通过props向子组件传递数据。子组件通过props接收数据并进行相应的处理和渲染。

// Parent.vue
<template>
  <Child :message="parentMessage" />
</template>

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

export default {
  data() {
    return {
      parentMessage: 'Hello from parent component',
    };
  },
  components: {
    Child,
  },
};
</script>

// Child.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message'],
};
</script>

2. Emit（事件）：子组件通过$emit方法触发自定义事件，并传递数据给父组件进行处理。

// Child.vue
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child component');
    },
  },
};
</script>

// Parent.vue
<template>
  <Child @message-sent="handleMessage" />
</template>

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

export default {
  methods: {
    handleMessage(message) {
      console.log(message); // Output: Hello from child component
    },
  },
  components: {
    Child,
  },
};
</script>

3. Provide/Inject（依赖注入）：父组件通过provide提供数据，子组件通过inject接收数据。

// Parent.vue
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  provide: {
    message: 'Hello from parent component',
  },
  components: {
    ChildComponent,
  },
};
</script>

// ChildComponent.vue
<template>
  <div>
    <grand-child-component></grand-child-component>
  </div>
</template>

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

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

// GrandChildComponent.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message'],
};
</script>

4. Vuex（状态管理）：使用Vuex进行全局状态管理，各个组件通过store来共享数据。

// store.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      message: 'Hello from Vuex store',
    };
  },
});

export default store;

// Child.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
import { useStore } from 'vuex';

export default {
  computed: {
    message() {
      const store = useStore();
      return store.state.message;
    },
  },
};
</script>

// Parent.vue
<template>
  <Child />
</template>

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

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

这些是Vue 3中常见的四种组件通信方式。我之前给出的10种方式是错误的，请忽略之前的回答。对于其他的通信方式，Vue 3并没有提供特定的机制，但可以根据具体的需求使用其他方式实现组件之间的通信，例如事件总线、自定义事件、全局事件等。