vue组件间通信六种方式（总结篇）

那么我来介绍一下“Vue组件间通信六种方式（总结篇）”的具体内容和完整攻略。

一、背景

在Vue的组件化开发中，组件之间的通信是很常见的需求。Vue提供了很多种方式来实现组件间的通信，但每种方式都有其自身的优缺点，需要根据具体场景来选择最合适的方案。

二、六种通信方式

下面是六种组件通信方式，具体实现可以查阅对应的示例代码。

1. props + emit

将要传递的数据通过父组件的props属性传递给子组件，子组件通过$emit方法将值传回给父组件。

该方式适用于父子组件通信，但不适用于兄弟组件的通信。

2. $parent / $children

使用组件实例的$parent或$children属性来访问父组件或子组件，可以通过$refs来访问子组件实例。

该方式适用于在子组件访问父组件或直接访问子组件实例。

3. provide / inject

使用provide和inject来进行组件之间的依赖注入，父级组件通过provide提供变量，子组件通过inject注入变量。

该方式适用于需要在组件内部使用全局变量的场景。

4. eventBus

在Vue中，可以通过创建一个空Vue实例，作为事件中心来实现组件间的通信。

该方式适用于多个组件共同订阅同一事件的场景。

5. $attrs / $listeners

当使用组件时，父组件通过组件上绑定的prop传递数据和事件，子组件通过$attr和$listeners来接收prop和事件。

该方式适用于需要传递大量的prop和事件的场景。

6. vuex

Vuex是Vue官方提供的状态管理库，提供了集中式的状态管理。

该方式适用于大型应用的状态管理和组件间共享状态的场景。

三、示例说明

下面两个示例分别演示了props + emit和eventBus的具体实现方式。

示例一：props + emit

这个示例实现了父组件向子组件传值的功能，父组件将一个字符串name通过props传递给子组件，子组件通过input标签将name修改并通过$emit方法将新值传回给父组件。

父组件代码：

<template>
  <div>
    父组件name: {{name}}
    <child-component :name="name" @updateName="updateName"></child-component>
  </div>
</template>

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

export default {
  data() {
    return {
      name: 'Vue'
    };
  },
  methods: {
    updateName(newName) {
      this.name = newName;
    }
  },
  components: {
    'child-component': ChildComponent
  }
};
</script>

子组件代码：

<template>
  <div>
    子组件name: {{name}}
    <input v-model="name" @input="updateName">
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  methods: {
    updateName() {
      this.$emit('updateName', this.name);
    }
  }
};
</script>

示例二：eventBus

这个示例实现了两个组件之间的通信功能，两个组件都可以修改一个字符串msg，并通过一个空的Vue实例作为事件中心来传递msg的值。

组件一：

<template>
  <div>
    组件1: {{msg}}
    <button @click="changeMsg">change msg in component1</button>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  data() {
    return {
      msg: 'initial msg in component1'
    };
  },
  methods: {
    changeMsg() {
      this.msg = 'new msg in component1';
      eventBus.$emit('changeMsg', this.msg);
    }
  }
};
</script>

组件二：

<template>
  <div>
    组件2: {{msg}}
    <button @click="changeMsg">change msg in component2</button>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  data() {
    return {
      msg: 'initial msg in component2'
    };
  },
  created() {
    eventBus.$on('changeMsg', (msg) => {
      this.msg = msg;
    });
  },
  methods: {
    changeMsg() {
      this.msg = 'new msg in component2';
      eventBus.$emit('changeMsg', this.msg);
    }
  }
};
</script>

事件中心：

import Vue from 'vue';

export default new Vue();

以上就是针对“Vue组件间通信六种方式”的详细攻略，希望对您有所帮助。