Vue2和Vue3的10种组件通信方式梳理

Vue.js是一款用于构建用户界面的渐进式JavaScript框架，为单页应用提供了一系列有用的特性，如组件化、数据双向绑定、路由管理等。在Vue.js应用程序中，组件通信是非常重要的一环，本文将详细讲解Vue2和Vue3中的10种组件通信方式，以便开发者可以更好地应用这些技巧。

1. 父子组件通信

1.1 父传子

在Vue.js中，父组件可以通过props传递数据到子组件中，这种方式适用于父子组件之间的单向数据流通信。下面是一个示例：

<template>
  <div>
    <child :message="message"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

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

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

在上述示例中，通过父组件的message属性将Hello, World!传递给子组件，子组件将props中的message渲染到页面中。

1.2 子传父

子组件通过$emit方法触发父组件的事件来实现子传父的方式，下面是一个示例：

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

<script>
export default {
  methods: {
    emitMessage() {
      this.$emit('message-to-parent', 'Hello, Parent!');
    }
  }
}
</script>

<template>
  <div>
    <child @message-to-parent="getChildMessage"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  methods: {
    getChildMessage(message) {
      alert(message);
    }
  }
}
</script>

在上述示例中，子组件通过@click事件触发emitMessage方法，该方法通过$emit方法触发了父组件的message-to-parent事件，并传递了Hello, Parent!。父组件通过监听该事件，获取到了子组件传递的信息，并进行alert提示。

2. 兄弟组件通信

2.1 通过共同的父组件传递信息

可以通过共同的一个父组件来实现兄弟组件之间的通信，这种方式相当于将父组件作为兄弟组件之间的代理，将信息从一个组件传递到另一个组件。

<template>
  <div>
    <a v-on:click="setCurrent(name)">Set current component</a>
    <child-1 :current="current"></child-1>
    <child-2 :current="current"></child-2>
  </div>
</template>

<script>
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';

export default {
  components: {
    Child1,
    Child2
  },
  data() {
    return {
      current: ''
    }
  },
  methods: {
    setCurrent(name) {
      this.current = name;
    }
  }
}
</script>

在上述示例中，父组件通过click事件触发了setCurrent方法，该方法将当前组件名赋值给了current变量。通过子组件中props接收父组件中的current变量，进行渲染。这样，当某一个子组件props收到值的改变，当前页和其他页的相应数据都会变化。

2.2 使用Vue2中的事件总线

在Vue2中，可以通过创建一个Event Bus实例来实现兄弟组件之间的通信，该实例可作为一个中央事件总线，兄弟组件通过该实例来进行通信。

<template>
  <div>
    <button @click="send()">Send Message</button>
  </div>
</template>

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

export default {
  methods: {
    send() {
      EventBus.$emit('message', 'Hello, World!');
    }
  }
}
</script>

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

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

export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    EventBus.$on('message', message => {
      this.message = message;
    });
  }
}
</script>

在上述示例中，使用EventBus.$emit触发message事件，子组件通过EventBus.$on监听该事件，并将接收到的数据赋值给了message变量。

2.3 使用Vue3中的provide/inject

Vue3中提供了新的API，provide/inject方法可以实现祖先组件向所有的后代子组件传递信息。这种方式比共同的父组件传递信息方式更加适用于跨组件传递复杂数据结构。

<template>
  <div>
    <child-1></child-1>
    <child-2></child-2>
  </div>
</template>

<script>
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';
import { provide } from 'vue';

export default {
  components: {
    Child1,
    Child2
  },
  setup() {
    const message = 'Hello, World!';
    provide('message', message);
  }
}
</script>

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

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

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

在上述示例中，父组件通过provide方法向后代子组件提供了message变量。后代子组件通过inject方法获取了message变量，并进行渲染显示。

3. 任意两个组件间通信

3.1 通过事件总线

事件总线可以用于任意两个组件之间的通信，只需创建一个全局的Event Bus实例，在各个组件之间进行信息交换即可。如示例2.2所示。

3.2 通过Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式，它可以贯穿整个应用的生命周期，并将组件状态作为中央存储库进行管理，为组件之间提供了双向绑定的响应式数据流通信机制。

<template>
  <div>
    <button @click="setMessage">Set Message</button>
    <child></child>
  </div>
</template>

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

export default {
  methods: {
    ...mapMutations(['setMessage']),
  }
}
</script>

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

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

export default {
  computed: {
    ...mapState(['message']),
  }
}
</script>

在上述示例中，通过mapMutations将setMessage方法映射到当前组件中，点击按钮后通过该方法修改Vuex中的message变量。子组件中通过mapState将Vuex中的message变量映射到组件中进行渲染。这样，两个组件就实现了信息的交换。

3.3 使用全局函数

全局函数可以用于在任何组件之间方便地进行通信，只需在Vue实例上挂载一个方法即可，示例如下：

Vue.prototype.$myFunction = function(message) {
  console.log(message);
}

在其中一个组件中调用该方法：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$myFunction('Hello, World!');
    }
  }
}
</script>

在另一个组件中接收该方法：

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

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.$root.$on('myFunction', message => {
      this.message = message;
    });
  }
}
</script>

在上述示例中，将全局函数绑定到Vue.prototype上，在发送组件中使用this.$myFunction触发函数，在接收组件中通过this.$root.$on监听该函数，在函数被触发时，接收组件将message赋值给了本地变量进行渲染。

本文仅是对Vue2和Vue3中组件通信方式的简单梳理，在实际开发中，还需结合具体的业务需求，来选择适用的通信方式。