vue的通讯是什么

Vue的通讯是通过以下几种主要方式实现的：1、父子组件通信；2、兄弟组件通信；3、跨组件通信；4、全局事件总线。下面将详细描述这些通信方式及其实现方法。

一、父子组件通信

父子组件通信是 Vue 中最常见的通信方式，通常通过 props 和 events 实现。

Props 传递数据

父组件通过 props 向子组件传递数据。
子组件通过 props 接收数据。

示例：

<!-- 父组件 -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>
<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  }
};
</script>
<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: ['message']
};
</script>

事件传递

子组件通过 $emit 触发事件，并将数据传递给父组件。
父组件监听子组件的事件，并进行相应处理。

示例：

<!-- 子组件 -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('messageSent', 'Hello from Child');
    }
  }
};
</script>
<!-- 父组件 -->
<template>
  <child-component @messageSent="receiveMessage"></child-component>
</template>
<script>
export default {
  methods: {
    receiveMessage(message) {
      console.log(message);
    }
  }
};
</script>

二、兄弟组件通信

兄弟组件之间的通信通常通过一个共同的父组件或全局事件总线来实现。

通过共同的父组件

共同的父组件充当中介，通过 props 和 events 在兄弟组件之间传递数据。

示例：

<!-- 父组件 -->
<template>
  <sibling-one @messageSent="forwardMessage"></sibling-one>
  <sibling-two :message="sharedMessage"></sibling-two>
</template>
<script>
export default {
  data() {
    return {
      sharedMessage: ''
    };
  },
  methods: {
    forwardMessage(message) {
      this.sharedMessage = message;
    }
  }
};
</script>
<!-- 兄弟组件一 -->
<template>
  <button @click="sendMessage">Send Message to Sibling Two</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('messageSent', 'Hello from Sibling One');
    }
  }
};
</script>
<!-- 兄弟组件二 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: ['message']
};
</script>

通过全局事件总线

创建一个全局事件总线，通过它在组件之间传递事件和数据。

示例：

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();
<!-- 兄弟组件一 -->
<template>
  <button @click="sendMessage">Send Message to Sibling Two</button>
</template>
<script>
import { EventBus } from './eventBus';
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('messageSent', 'Hello from Sibling One');
    }
  }
};
</script>
<!-- 兄弟组件二 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
import { EventBus } from './eventBus';
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    EventBus.$on('messageSent', (message) => {
      this.message = message;
    });
  }
};
</script>

三、跨组件通信

跨组件通信通常使用 Vuex 或者 Provide/Inject。

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，通过集中式存储管理应用的所有组件的状态。

示例：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('setMessage', message);
    }
  },
  getters: {
    getMessage: state => state.message
  }
});
<!-- 组件一 -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>
<script>
import { mapActions } from 'vuex';
export default {
  methods: {
    ...mapActions(['updateMessage']),
    sendMessage() {
      this.updateMessage('Hello from Component One');
    }
  }
};
</script>
<!-- 组件二 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters(['getMessage'])
  },
  mounted() {
    this.message = this.getMessage;
  }
};
</script>

Provide/Inject

Provide 和 Inject 是 Vue 提供的用于跨级组件通信的 API，通常用于插件开发和依赖注入。

示例：

<!-- 父组件 -->
<template>
  <child-component></child-component>
</template>
<script>
export default {
  provide() {
    return {
      message: 'Hello from Parent'
    };
  }
};
</script>
<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  inject: ['message']
};
</script>

四、全局事件总线

全局事件总线是一种简单的跨组件通信方式，适合在项目较小或不适合引入 Vuex 的情况下使用。

创建事件总线

在项目的入口文件中创建一个全局事件总线。

示例：

// main.js
import Vue from 'vue';
Vue.prototype.$bus = new Vue();
new Vue({
  render: h => h(App),
}).$mount('#app');

使用事件总线

在需要通信的组件中，通过 $bus 来触发和监听事件。

示例：

<!-- 组件一 -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$bus.$emit('messageSent', 'Hello from Component One');
    }
  }
};
</script>
<!-- 组件二 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    this.$bus.$on('messageSent', (message) => {
      this.message = message;
    });
  }
};
</script>

总结：Vue 的通讯方式多种多样，主要包括父子组件通信、兄弟组件通信、跨组件通信和全局事件总线。选择哪种方式取决于应用的规模和复杂性。对于简单的场景，使用 props 和 events 足够；对于复杂的状态管理，Vuex 是一个很好的选择；而全局事件总线则适合用于项目较小或不适合引入 Vuex 的情况。了解并熟练运用这些通信方式，可以让开发者更好地管理和组织 Vue 应用中的数据流，提高开发效率和代码的可维护性。

vue的通讯是什么

一、父子组件通信

二、兄弟组件通信

三、跨组件通信

四、全局事件总线

相关问答FAQs：

发表回复