详解vue2.0组件通信各种情况总结与实例分析

在Vue的组件化开发中，不同组件之间的通信是非常常见的需求。Vue提供了多种方式来实现组件之间的通信，根据使用场景和需求的不同，我们可以选择不同的方式。下面我们分别来详细讲解这些通信方式及其使用场景。

组件通信方式

父子组件通信

父子组件通信是最为常见的一种组件通信方式，在父组件内部渲染子组件，子组件接受父组件传递的数据并渲染数据，同时还可以通过$emit方法来触发父组件的事件。

// 父组件
<template>
  <div>
    <child :message="message" @custom-event="onCustomEvent"></child>
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      message: '这是传递给子组件的数据',
    }
  },
  methods: {
    onCustomEvent(msg) {
      console.log(msg);
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="onClick">点击触发父组件事件</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    onClick() {
      this.$emit('custom-event', '这是自定义事件的参数');
    }
  }
}
</script>

兄弟组件通信

兄弟组件通信是指在同一级别的组件之间进行通信。在Vue中，可以通过引入一个空的Vue实例来作为兄弟组件之间的桥梁，通过$emit和$on方法来进行通信。

// A组件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">发送消息给B组件</button>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      message: '这是传递给B组件的消息'
    }
  },
  methods: {
    sendMessage() {
      Vue.prototype.$eventBus.$emit('message-from-a', this.message);
    }
  }
}
</script>

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

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    Vue.prototype.$eventBus.$on('message-from-a', (message) => {
      this.message = message;
    });
  }
}
</script>

跨层级组件通信

在Vue中，跨层级组件之间的通信需要使用Vue的provide/inject API来实现，通过provide向子组件提供数据，通过inject在子组件中获取父组件提供的数据。

// 父组件
<template>
  <div>
    <p>{{ message }}</p>
    <child></child>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      message: '这是传递给子组件的数据'
    }
  },
}
</script>

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

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

export default {
  components: {
    GrandChild
  },
  inject: {
    message: {
      default: ''
    }
  }
}
</script>

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

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