vue 3子组件之间如何通信

在Vue 3中，子组件之间的通信可以通过多种方式实现。1、使用props和事件、2、依赖注入、3、使用provide和inject、4、使用Vuex或Pinia、5、使用事件总线。其中，使用props和事件是最常见的方式。

使用props和事件的方式如下：

父组件通过props向子组件传递数据。
子组件通过$emit向父组件发送事件，父组件可以捕获这些事件并作出响应。

具体步骤如下：

一、使用props和事件

父组件向子组件传递数据：

<template>
  <div>
    <ChildComponent :message="parentMessage" @childEvent="handleChildEvent"/>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  },
  methods: {
    handleChildEvent(payload) {
      console.log('Received from child:', payload);
    }
  }
};
</script>

子组件接收数据并发送事件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendEvent">Send Event to Parent</button>
  </div>
</template>
<script>
export default {
  props: {
    message: String
  },
  methods: {
    sendEvent() {
      this.$emit('childEvent', 'Hello from Child');
    }
  }
};
</script>

这种方式适用于父子组件之间的通信，但在更复杂的场景中，可能需要其他方法来实现跨组件通信。

二、依赖注入

依赖注入（Dependency Injection）是Vue 3中新增的一种跨组件通信方式，它通过provide和inject来实现祖先组件和后代组件之间的数据共享。

祖先组件提供数据：

<template>
  <div>
    <AncestorComponent>
      <DescendantComponent />
    </AncestorComponent>
  </div>
</template>
<script>
import AncestorComponent from './AncestorComponent.vue';
import DescendantComponent from './DescendantComponent.vue';
export default {
  components: {
    AncestorComponent,
    DescendantComponent
  }
};
</script>

祖先组件使用provide提供数据：

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  provide() {
    return {
      sharedData: 'Shared data from ancestor'
    };
  }
};
</script>

后代组件使用inject接收数据：

<template>
  <div>
    <p>{{ sharedData }}</p>
  </div>
</template>
<script>
export default {
  inject: ['sharedData']
};
</script>

这种方式可以在嵌套层级较深的组件之间共享数据，但不适用于需要频繁更新的数据。

三、使用provide和inject

provide和inject是Vue 3新增的特性，适用于需要在嵌套组件之间共享数据的场景。

父组件使用provide提供数据：

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  provide() {
    return {
      sharedMessage: 'Hello from Parent using provide/inject'
    };
  }
};
</script>

子组件使用inject接收数据：

<template>
  <div>
    <p>{{ sharedMessage }}</p>
  </div>
</template>
<script>
export default {
  inject: ['sharedMessage']
};
</script>

这种方式与依赖注入类似，但更适用于需要在多个组件之间共享数据的场景。

四、使用Vuex或Pinia

对于复杂的应用程序，使用状态管理库如Vuex或Pinia可以更高效地管理应用状态，并实现跨组件通信。

安装Vuex：
```
npm install vuex@next
```

创建Vuex Store：

import { createStore } from 'vuex';
const store = createStore({
  state() {
    return {
      sharedState: 'Shared state from Vuex'
    };
  },
  mutations: {
    updateState(state, payload) {
      state.sharedState = payload;
    }
  }
});
export default store;

在根组件中注册Store：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
const app = createApp(App);
app.use(store);
app.mount('#app');

在组件中使用Store：

<template>
  <div>
    <p>{{ sharedState }}</p>
    <button @click="updateSharedState">Update State</button>
  </div>
</template>
<script>
import { useStore } from 'vuex';
export default {
  setup() {
    const store = useStore();
    const sharedState = store.state.sharedState;
    const updateSharedState = () => {
      store.commit('updateState', 'Updated shared state from Vuex');
    };
    return {
      sharedState,
      updateSharedState
    };
  }
};
</script>

使用Vuex或Pinia的方式适用于大型应用程序，可以更好地管理全局状态和跨组件通信。

五、使用事件总线

事件总线是一种简单的跨组件通信方式，适用于需要在非父子关系的组件之间传递事件的场景。

创建事件总线：

import { createApp } from 'vue';
const eventBus = createApp();
export default eventBus;

在组件中使用事件总线：

<template>
  <div>
    <button @click="sendEvent">Send Event</button>
  </div>
</template>
<script>
import eventBus from './eventBus';
export default {
  methods: {
    sendEvent() {
      eventBus.emit('customEvent', 'Hello from EventBus');
    }
  }
};
</script>

在其他组件中接收事件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import eventBus from './eventBus';
export default {
  setup() {
    const message = ref('');
    onMounted(() => {
      eventBus.on('customEvent', (payload) => {
        message.value = payload;
      });
    });
    return {
      message
    };
  }
};
</script>

事件总线适用于需要在非父子关系组件之间传递事件的场景，但在大型应用中可能会导致事件管理混乱。

总结

在Vue 3中，子组件之间的通信可以通过多种方式实现，包括使用props和事件、依赖注入、provide和inject、Vuex或Pinia，以及事件总线。每种方法都有其适用的场景和优缺点。在选择具体方法时，应根据应用的复杂度和实际需求进行选择。对于简单的父子组件通信，可以使用props和事件；对于嵌套层级较深的组件通信，可以使用provide和inject；对于复杂的状态管理和跨组件通信，可以使用Vuex或Pinia；对于非父子关系的组件通信，可以使用事件总线。通过合理选择和组合这些方法，可以有效地实现Vue 3中子组件之间的通信，提升开发效率和代码维护性。