一起来学习Vue的组件间通信方式

在Vue开发中，组件是进行页面构建的基本单元。不同的组件之间经常需要进行通信，以达到共同完成某个任务的目的。本文将详细讲解Vue的组件间通信方式。

props 和 $emit

Vue的组件实例只能向下传递数据。也就是说，顶层组件可以将数据传递到其子组件，子组件可以将数据传递到孙子组件，而孙子组件则不能直接向其父组件传递数据。这时候，可以利用组件的props和$emit属性来完成父子组件之间的通信。

props

props是用于父组件向子组件传递数据的一种机制。通过在子组件中定义props属性，从而实现对父组件传递的数据的限制和验证。

在父组件中的使用方法如下：

<template>
  <child-component :propName="propValue"></child-component>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      propValue: 'hello world'
    }
  }
}
</script>

在子组件中的使用方法如下：

<template>
  <div>{{ propName }}</div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    propName: {
      type: String,
      required: true
    }
  }
}
</script>

在子组件的props属性中，定义propName属性，并且指定其类型为字符串类型，required为true时表示该属性必须有父组件传递值，否则会抛出警告。

$emit

$emit是用于子组件向父组件传递事件的一种机制。通过在子组件中定义事件，并通过$emit方法触发该事件，从而实现从子组件向父组件传递数据。

在子组件中定义事件的方法如下：

<template>
  <button @click="onClick">Submit</button>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    onClick() {
      this.$emit('eventName', 'hello world');
    }
  }
}
</script>

在父组件中监听子组件的事件的方法如下：

<template>
  <child-component @eventName="onEvent"></child-component>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    onEvent(data) {
      console.log(data); // 输出hello world
    }
  }
}
</script>

$parent 和 $children

$parent和$children是Vue提供的两种不太优雅的组件通信方式。它们分别表示一个组件的父组件和子组件列表。这种方式的缺点是它增加了组件之间的耦合性，而且不够灵活，但在一些特定情况下可以使用。

$parent

$parent返回当前组件实例的父级实例，通过其可以直接访问父级组件的属性和方法。

<template>
  <div>{{ parentValue }}</div>
</template>

<script>
export default {
  name: 'ChildComponent',
  computed: {
    parentValue() {
      return this.$parent.parentValue;
    }
  }
}
</script>

在上面的例子中，子组件通过$parent访问父组件的属性parentValue。

$children

$children返回当前组件实例的所有子级实例的数组。

<template>
  <ul>
    <li v-for="item in children">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  name: 'ParentComponent',
  mounted() {
    console.log(this.$children);
  },
  computed: {
    children() {
      return this.$children.filter(child => child.name === 'ChildComponent');
    }
  }
}
</script>

在上面的例子中，父组件通过$children属性获取其所有子组件的实例，并通过过滤，只获取名字为ChildComponent的子组件实例，从而实现对符合特定条件的组件的访问。

实例与事件总线

实例和事件总线可以被视为两种相似的组件通信方式。它们都可以实现不同组件之间的通信，但它们的具体实现方式有所不同。

实例

在Vue的组件中，可以使用Vue.extend方法来创建一个组件的实例，通过直接访问该实例的属性，完成对该组件实例的操作。不同的组件实例之间可以通过访问全局变量window实现互相之间的通信。

<template>
  <div>{{ instanceValue }}</div>
</template>

<script>
import Vue from 'vue';

export default {
  name: 'ChildComponent',
  mounted() {
    const instance = new Vue({
      data() {
        return {
          instanceValue: 'hello world from another instance'
        }
      }
    });

    console.log(instance.instanceValue); // 输出hello world from another instance
  }
}
</script>

在上面的例子中，子组件中创建了一个新的Vue实例，在该实例中维护一个名为instanceValue的属性。并在子组件mounted钩子函数中访问该实例的属性instanceValue，并输出其值。

事件总线

事件总线是Vue中的一种广播机制，也叫做事件中心。通过在一个Vue实例上注册事件，从而让不同的组件实例进行通信。

// event-bus.js

import Vue from 'vue';

const eventBus = new Vue();

export default eventBus;

在上面的代码中，通过创建一个新的Vue实例，来实现事件总线。

在需要使用事件总线的组件中，只需要导入事件总线，并注册事件即可。

<template>
  <div>{{ eventBusValue }}</div>
</template>

<script>
import eventBus from './event-bus';

export default {
  name: 'ChildComponent',
  data() {
    return {
      eventBusValue: ''
    }
  },
  created() {
    eventBus.$on('eventName', data => {
      this.eventBusValue = data;
    });
  }
}
</script>

在上面的例子中，子组件通过在事件总线中注册事件eventName，来监听来自不同组件的事件，并通过回调函数，获取事件传递的数据，使用该数据更新组件中的eventBusValue属性。

在需要触发事件的组件中，只需要在Vue实例上触发事件即可。

<template>
  <button @click="onClick">Submit</button>
</template>

<script>
import eventBus from './event-bus';

export default {
  name: 'ChildComponent',
  methods: {
    onClick() {
      eventBus.$emit('eventName', 'hello world');
    }
  }
}
</script>

在上面的例子中，子组件通过$emit方法，触发名为eventName的事件，并传递了字符串'hello world'给注册了该事件的子组件。

结语

本文详细讲解了Vue的组件间通信方式，包括props和$emit、$parent和$children、实例与事件总线。在实际开发中，需要根据具体的情况，选择合适的方式进行通信。