Vue.js组件通信：父传子，子传父，兄弟组件通信

2023-10-18 18:25:49

父传子（父通过import + component写入子组件，然后v-bind绑定数据，子通过props接收）

父传子是父组件将数据传递给子组件的常见场景。在父组件中，我们可以通过import + component的方式引入子组件，然后通过v-bind绑定数据，子组件通过props接收。

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, world!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  props: ['message'],
  data() {
    return {};
  }
};
</script>

在上面的例子中，父组件通过v-bind将message数据绑定到子组件的props，子组件通过props接收并显示message数据。

子传父（子通过$emit触发自定义事件，父通过v-on监听该事件）

子传父是子组件将数据或事件传递给父组件的场景。在子组件中，我们可以通过$emit触发自定义事件，父组件通过v-on监听该事件。

<!-- 子组件 -->
<template>
  <div>
    <button @click="emitMessage">Send message to parent</button>
  </div>
</template>

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

<!-- 父组件 -->
<template>
  <div>
    <child-component @message="handleMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log('Received message from child component:', message);
    }
  }
};
</script>

在上面的例子中，子组件通过$emit触发message自定义事件，并传递数据，父组件通过v-on监听message事件，并执行handleMessage方法处理数据。

兄弟组件通信（通过EventBus或者Vuex来实现）

兄弟组件通信是指不通过父组件，兄弟组件之间直接通信的场景。我们可以通过EventBus或Vuex来实现兄弟组件通信。

EventBus是一种全局事件总线，兄弟组件可以通过EventBus触发和监听事件来进行通信。

// EventBus.js
export default {
  on(event, callback) {
    this._events[event] = this._events[event] || [];
    this._events[event].push(callback);
  },
  emit(event, ...args) {
    if (this._events[event]) {
      this._events[event].forEach(callback => callback.apply(this, args));
    }
  }
};

<!-- 兄弟组件A -->
<template>
  <div>
    <button @click="emitMessage">Send message to brother component</button>
  </div>
</template>

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

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

<!-- 兄弟组件B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

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

在上面的例子中，兄弟组件A通过EventBus触发message事件，兄弟组件B通过EventBus监听message事件，并更新message数据。

Vuex是一种状态管理工具，我们可以通过Vuex来实现兄弟组件通信。

// store.js
export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  }
});

<!-- 兄弟组件A -->
<template>
  <div>
    <button @click="setMessage">Send message to brother component</button>
  </div>
</template>

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

export default {
  methods: {
    ...mapMutations([
      'setMessage'
    ]),
    setMessage() {
      this.setMessage('Hello, world!');
    }
  }
};
</script>

<!-- 兄弟组件B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

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