Vue3.2版本组件通讯

在Vue3.2版本中，组件通讯可以使用props、事件和provide/inject来实现。

1. Props：通过props属性，父组件可以向子组件传递数据。子组件通过在props中定义需要接收的属性，然后可以在模板中使用这些属性。

父组件中使用props传递数据：

<template>
  <child-component :message="parentMessage"></child-component>
</template>

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

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

子组件中使用props接收数据：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
};
</script>

2. 事件：通过自定义事件，子组件可以向父组件发送消息。子组件通过使用$emit方法触发事件，父组件通过在子组件上监听事件来接收消息。

父组件中监听事件：

<template>
  <child-component @custom-event="handleEvent"></child-component>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(data) {
      console.log('Received data:', data);
    }
  }
};
</script>

子组件中触发事件：

<template>
  <button @click="emitEvent">Trigger Event</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', 'Hello from child');
    }
  }
};
</script>

3. provide/inject：通过provide和inject可以实现父组件向子组件（孙子组件）传递数据，跨多层级组件通讯。

父组件中使用provide：

<template>
  <child-component></child-component>
</template>

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

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

子组件中使用inject接收数据：

<template>
  <div>{{ message }}</div>
</template>

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

这是Vue3.2版本中组件通讯的一些常用方法，你可以根据具体需求选择适合的方式来实现组件之间的通讯。