vue3组件通信的方式配合例子解释一下

在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>

这些是Vue 3中常用的组件通信方式，每种方式都有适用的场景，根据具体需求选择合适的方式来实现组件之间的通信。