【前端每日基础】day36——vue组件的通信方式

在Vue.js中，组件通信是一个重要的概念，它允许组件之间进行数据传递和事件处理。Vue.js提供了多种方式来实现组件之间的通信，适用于不同的场景和需求。以下是Vue组件通信的几种常见方式及其详细介绍：

1. 父子组件通信
   父组件向子组件传递数据（Props）
   父组件可以通过props向子组件传递数据。子组件通过声明props接收数据。

父组件

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

子组件

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

子组件向父组件传递数据（事件）
子组件可以通过$emit方法向父组件发送事件，父组件通过监听这些事件来接收数据。

子组件

<template>
  <button @click="sendMessage">Click me</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child');
    }
  }
};
</script>

父组件

<template>
  <div>
    <child-component @message="handleMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(msg) {
      console.log(msg);
    }
  }
};
</script>

2. 兄弟组件通信
   兄弟组件之间通常通过共同的父组件来进行通信。父组件充当中介，传递数据或事件。

示例
兄弟组件A

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from sibling A');
    }
  }
};
</script>

兄弟组件B

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  }
};
</script>

父组件

<template>
  <div>
    <sibling-a @message="handleMessage"></sibling-a>
    <sibling-b :message="message"></sibling-b>
  </div>
</template>

<script>
import SiblingA from './SiblingA.vue';
import SiblingB from './SiblingB.vue';

export default {
  components: {
    SiblingA,
    SiblingB
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleMessage(msg) {
      this.message = msg;
    }
  }
};
</script>

3. 跨级组件通信
   对于跨级组件通信，可以使用事件总线（Event Bus）或Vuex状态管理。

事件总线
事件总线是一个中央事件处理器，可以用来在任意组件之间传递事件。

事件总线

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

发送事件的组件

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
import { EventBus } from './eventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from event bus');
    }
  }
};
</script>

接收事件的组件

<template>
  <div>{{ message }}</div>
</template>

<script>
import { EventBus } from './eventBus';

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

Vuex状态管理
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它集中式存储和管理应用的所有组件的状态，并以一种规则化的方式保证状态以一种可预测的方式发生变化。

安装Vuex

npm install vuex

配置Vuex

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, msg) {
      state.message = msg;
    }
  },
  actions: {
    updateMessage({ commit }, msg) {
      commit('setMessage', msg);
    }
  },
  getters: {
    message: 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 Vuex');
    }
  }
};
</script>

接收数据的组件

<template>
  <div>{{ message }}</div>
</template>

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

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

总结
Vue.js提供了多种组件通信的方式，从简单的父子组件通信到复杂的跨级组件通信，每种方式都有其适用的场景。理解并合理应用这些通信方式，可以大大提高组件间的数据传递效率和应用的可维护性。