vue3组件常用的通信方式(父传子、子传父、父直接获取子、pinia)

1.父传子

      父组件通过属性（Props）向子组件传递数据。

      <!-- 父组件 -->

<template>
    <ChildComponent :some-prop="parentData" />
</template>
<script>
    import ChildComponent from './ChildComponent.vue';
    export default {
        components: {
            ChildComponent
        },
        data() {
            return {
                parentData: '这是父组件的数据'
            };
        }
    }

</script>

<!-- 子组件 -->
<template>
    <div>{{ someProp }}</div>
</template>
<script>
    export default {
        props: ['someProp']
    }
</script>

2.子传父

      子组件通过自定义事件向父组件传递数据。

<!-- 子组件 -->
<template>
    <button @click="sendMessageToParent">子组件发送消息</button>
</template>
<script>
    export default {
        methods: {
            sendMessageToParent() {
                this.$emit('message', '这是来自子组件的消息');
            }
        }
    }
</script>

<!-- 父组件 -->
<template>
    <ChildComponent @message="receiveMessage" />
</template>
<script>
    import ChildComponent from './ChildComponent.vue';
    export default {
        methods: {
            receiveMessage(message) {
                console.log(message); // '这是来自子组件的消息'
            }
        }
    }
</script>

3.父直接获取子

      父组件可以通过$children或$refs来直接访问子组件的方法或数据。

<!-- 父组件 -->
<template>
    <ChildComponent ref="childComp" />
    <button @click="callChildMethod">调用子组件方法</button>
</template>
<script>
    import ChildComponent from './ChildComponent.vue';
    export default {
        components: {
            ChildComponent
        },
        methods: {
            callChildMethod() {
                this.$refs.childComp.someMethod();
            }
        }
    }
</script>

4.使用Pinia进行状态管理

      Pinia是Vue 3官方推荐的状态管理库，它是对Vuex的重新思考和简化。

<!-- 父组件 -->
<template>
    <div>{{ count }}</div>
    <button @click="increment">增加</button>
</template>
<script>
    import { useStore } from 'pinia';
    import { defineComponent } from 'vue';
    export default defineComponent({
        setup() {
            const store = useStore();
            const count = store.count;
            const increment = () => {
                store.increment();
            };
            return { count, increment };
        }
    });
</script>

<!-- 子组件 -->
<template>
    <button @click="decrement">减少</button>
</template>
<script>
    import { useStore } from 'pinia';
    import { defineComponent } from 'vue';
    export default defineComponent({
        setup() {
            const store = useStore();
            const decrement = () => {
                store.decrement();
            };
            return { decrement };
        }
    });
</script>

以上就是在Vue 3中进行组件间通信的一些常见方法。在实际应用中，应根据具体需求选择最适合的通信方式。