Vue实现组件间通信的11种方式

原文合集地址如下，有需要的朋友可以关注

本文地址

合集地址

组件之间的通信是指不同组件之间在共享数据、传递消息或触发事件等方面进行交流和协作的过程。在应用程序中，不同的组件可能需要相互传递数据、共享状态、触发动作或响应事件等，以实现组件之间的协调和交互。

vue组件之间的通信可以有多种形式和方式，常见的包括：

1. Props / 组件属性: 通过父组件向子组件传递数据，将数据作为组件的属性（props）传递给子组件。子组件通过接收这些属性来访问和使用父组件传递的数据。

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage" />
  </div>
</template>

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

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

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <p>{
   {
    message }}</p>
  </div>
</template>

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

1. Custom Events / 自定义事件: 子组件可以触发自定义事件，并通过事件传递数据给父组件或其他监听该事件的组件。父组件或其他组件通过监听并处理这些自定义事件来接收传递的数据。

<!-- 父组件 -->
<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

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

<!-- 父组件 -->
<template>
  <div>
    <child-component @custom-event="handleEvent" />
  </div>
</template>

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

export default {
   
  components: {
   
    ChildComponent
  },
  methods: {
   
    handleEvent(message) {
   
      console.log(message); // 输出：Hello from child
    }
  }
}
</script>

1. Event Bus / 事件总线: 使用一个全局事件总线来实现组件之间的通信。不同的组件可以通过事件总线来订阅和发布事件，实现数据的传递和通知。需要先下载依赖mtt

npm install mitt
// 或者
yarn add mitt

// EventBus.js
import mitt from 'mitt';

const bus = mitt();

export default bus;

<!-- 组件A -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import bus from './EventBus';

export default {
   
  methods: {
   
    sendMessage() {
   
      bus.emit('custom-event', 'Hello from Component A');
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <p>{
   {
    message }}</p>
  </div>
</template>

<script>
import bus from './EventBus';

export default {
   
  data() {
   
    return {
   
      message: ''
    };
  },
  mounted() {
   
    bus.on('custom-event', (message) => {
   
      this.message = message;
    });
  }
}
</script>

1. Vuex / 状态管理: 使用 Vuex 这样的状态管理库来集中管理应用程序的状态。不同的组件可以通过访问共享的状态来实现通信和共享数据。

// 创建 Vuex 存储
import {
    createStore } from 'vuex';

const store = createStore({
   
  state() {
   
    return {
   
      message: 'Hello from Vuex'
    };
  },
  mutations: {
   
    updateMessage(state, newMessage) {
   
      state.message = newMessage;
    }
  }
});

export default store;

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <p>{
   {
    message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import {
    useStore } from 'vuex';

export default {
   
  setup() {
   
    const store = useStore();

    const updateMessage = () => {
   
      store.commit('updateMessage', 'Updated message from child');
    };

    return {
   
      message: store.state.message,
      updateMessage
    };
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component />
  </div>
</template>

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

export default {
   
  components: {
   
    ChildComponent
  }
}
</script>

1. Provide / Inject: 使用 provide 和 inject API 来在组件树中提供和注入数据。父组件通过 provide 提供数据，子组件通过 inject 来注入需要的数据。

<!-- 祖先组件 -->
<template>
  <div>
    <child-component />
  </div>
</template>

<script>
import {
    provide } from 'vue';

export default {
   
  setup() {
   
    const message = 'Hello from ancestor';
    provide('message', message);
  }
}
</script>

<!-- 后代组件 -->
<template>
  <div>
    <p>{
   {
    injectedMessage }}</p>
  </div>
</template>

<script>
import {
    inject } from 'vue';

export default {
   
  setup() {
   
    const injectedMessage = inject('message');
    return {
   
      injectedMessage
    };
  }
}
</script>

1. Ref / Reactive: 使用 Vue 3 的 Composition API 中的 ref 和 reactive 来创建和响应式地共享数据，以便不同组件可以访问和修改这些数据。

<!-- 子组件 -->
<template>
  <div>
    <p>{
   {
    message }}</p>
  </div>
</template>

<script>
export default {
   
  data() {
   
    return {
   
      message: 'Hello from child'
    };
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="childRef" />
    <button @click="getChildMessage">Get Child Message</button>
  </div>
</template>

<script>
import {
    ref } from 'vue';

export default {
   
  components: {
   
    ChildComponent
  },
  setup() {
   
    const childRef = ref(null);

    const getChildMessage = () => {
   
      const message = childRef.value.message;
      console.log(message); // 输出：Hello from child
    };

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

1. 全局事件 / 订阅发布模式: 使用全局事件或订阅发布模式来实现组件之间的通信。不同组件可以订阅和发布事件，以实现数据的传递和交互。

// 创建一个事件总线
const eventBus = new Vue();

// 组件A
const ComponentA = {
   
  methods: {
   
    updateMessage() {
   
      const newMessage = 'Updated message from Component A';
      eventBus.$emit('messageUpdated', newMessage);
    }
  },
  // 组件A的其他逻辑
};

// 组件B
const ComponentB = {
   
  data() {
   
    return {
   
      message: ''
    };
  },
  mounted() {
   
    eventBus.$on('messageUpdated', (newMessage) => {
   
      this.message = newMessage;
    });
  },
  // 组件B的其他逻辑
};

8.useAttrs: useAttrs是 Vue 3 中提供的一个 Composition API，用于获取组件上未声明为props的属性。

<!-- 组件 -->
<template>
  <div>
    <p>{
   {
    customAttribute }}</p>
  </div>
</template>

<script>
import {
    useAttrs } from 'vue';

export default {
   
  setup() {
   
    const attrs = useAttrs();
    return {
   
      customAttribute: attrs['custom-attribute']
    };
  }
}
</script>

<!-- 使用组件 -->
<template>
  <div>
    <custom-component custom-attribute="Custom Attribute Value" />
  </div>
</template>

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

export default {
   
  components: {
   
    CustomComponent
  }
}
</script>

1. Pinia: Pinia 是一个基于 Vue 3 的状态管理库，提供了一种更简洁和类型安全的方式来管理和共享组件之间的状态。需要先下载依赖

npm install pinia
//或者
yarn add pinia

// 创建 Pinia 存储
import {
    createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;

<!-- 组件A -->
<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import {
    useStore } from 'pinia';

export default {
   
  setup() {
   
    const store = useStore();

    const updateMessage = () => {
   
      store.message = 'Updated message from Component A';
    };

    return {
   
      updateMessage
    };
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <p>{
   {
    message }}</p>
  </div>
</template>

<script>
import {
    useStore } from 'pinia';

export default {
   
  setup() {
   
    const store = useStore();

    return {
   
      message: store.message
    };
  }
}
</script>

1. 插槽（Slots）: 插槽是一种允许父组件向子组件传递内容的机制。父组件可以在子组件中定义插槽，并将内容传递给插槽，子组件可以根据需要使用这些内容。

<!-- 父组件 -->
<template>
  <div>
    <child-component>
      <!-- 插槽内容 -->
      <template v-slot:content>
        <p>{
   {
    message }}</p>
        <button @click="updateMessage">Update Message</button>
      </template>
    </child-component>
  </div>
</template>

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

export default {
   
  components: {
   
    ChildComponent
  },
  data() {
   
    return {
   
      message: 'Hello from parent'
    };
  },
  methods: {
   
    updateMessage() {
   
      this.message = 'Updated message from parent';
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <!-- 插槽 -->
    <slot name="content"></slot>
  </div>
</template>

<script>
export default {
   
  // 子组件逻辑
}
</script>

1. v-model: v-model 是一种用于在父组件和子组件之间实现双向绑定的语法糖。它将value属性和input事件绑定在一起，使得父组件可以通过v-model来直接更新子组件的数据。

<!-- 子组件 -->
<template>
  <div>
    <input :value="value" @input="$emit('update:value', $event.target.value)" />
  </div>
</template>

<script>
export default {
   
  props: ['value']
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component v-model="message" />
    <p>Message: {
   {
    message }}</p>
  </div>
</template>

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

export default {
   
  components: {
   
    ChildComponent
  },
  data() {
   
    return {
   
      message: ''
    };
  }
}
</script>

这些通信方式可以根据应用程序的需求和复杂性进行选择和组合使用，以实现组件之间的有效通信和协作。