Vue3.0中常用的通信方式

1. 父传子（Props）：
父组件通过 props 向子组件传递数据。

父组件：

<template>
  <ChildComponent :message="messageFromParent" />
</template>

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

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

子组件：

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

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

2. 子传父（Events）：
子组件通过事件向父组件发送数据：

子组件：

<template>
  <button @click="sendMessageToParent">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessageToParent() {
      this.$emit('messageToParent', 'Hello from Child');
    },
  },
};
</script>

父组件：

<template>
  <ChildComponent @messageToParent="handleMessageFromChild" />
</template>

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

export default {
  methods: {
    handleMessageFromChild(message) {
      console.log(message);
    },
    components: {
      ChildComponent,
    },
  },
};
</script>

3. 父直接获取子组件（Ref）：
父组件通过 ref 直接获取子组件实例：

<template>
  <ChildComponent ref="childRef" />
</template>

<script>
import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const childRef = ref(null);
    
    onMounted(() => {
      console.log(childRef.value); // 可以直接访问子组件实例
    });

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

4.Vuex:

        使用 Vuex 管理应用程序的状态，任何组件都可以访问和修改共享状态，实现任意组件之间的通信。