vue.js 组件通信

在Vue.js中，组件通信是非常重要的主题。组件通信是指不同组件之间相互传递数据、触发事件和调用方法，以实现协同工作。

Vue.js提供了多种方式来实现组件通信，包括props和$emit、自定义事件、Vuex和事件总线。

首先，我们来看props和$emit的方式。props和$emit是Vue.js中父子组件之间进行通信的常用方式。

1. props和$emit:
   • 父组件通过props向子组件传递数据
   • 子组件通过$emit触发父组件的事件

父组件中的代码：

<template>
  <div>
    <child-component :message="message" @update-message="updateMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

子组件中的代码：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    changeMessage() {
      this.$emit('update-message', 'Hello from child');
    }
  }
}
</script>

在父组件中，通过props将message传递给子组件。子组件通过$emit触发父组件的update-message事件，并传递新的消息。

1. 自定义事件

Vue.js还提供了自定义事件的方式来实现组件通信。自定义事件可以在任何组件之间进行通信。

在子组件中，使用$on方法监听事件，并在适当的时候使用$emit方法触发事件。

在父组件中，使用$emit方法触发子组件的事件。

代码示例：

父组件中的代码：

<template>
  <div>
    <p>{{ message }}</p>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.$on('update-message', (newMessage) => {
      this.message = newMessage;
    });
  }
}
</script>

子组件中的代码：

<template>
  <div>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

在父组件中，使用$on方法监听子组件触发的事件，并在回调函数中更新message。

在子组件中，使用$emit方法触发父组件的update-message事件，并传递新的消息。

1. Vuex

Vuex是Vue.js的状态管理模式。它允许在不同的组件之间共享状态，并提供了一种管理和更新状态的机制。

使用Vuex进行组件通信的优点是可以在任何组件中访问和更新共享的状态，而不需要通过props和$emit传递数据。

首先，需要安装Vuex并创建一个store对象。

npm install vuex

创建store.js文件：

import Vuex from 'vuex';

const store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage;
    }
  }
});

export default store;

然后，在根组件中引入store并使用Vuex提供的mapState和mapMutations辅助函数，以获取和更新共享的状态。

<template>
  <div>
    <p>{{ message }}</p>
    <child-component></child-component>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapMutations(['updateMessage'])
  }
}
</script>

在子组件中，使用this.$store.commit方法来调用mutation，更新共享的状态。

<template>
  <div>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeMessage() {
      this.$store.commit('updateMessage', 'Hello from child');
    }
  }
}
</script>

通过上述代码，我们实现了父子组件之间的通信。

1. 事件总线

事件总线是一个Vue实例，它可以用来在任何组件之间发布和订阅事件。

首先，在main.js文件中创建一个空的Vue实例，并将其作为Vue原型属性。

import Vue from 'vue';

export const bus = new Vue();

然后，在需要通信的组件中，使用$emit方法发布事件，并在其他组件中使用bus.$on方法订阅事件。

父组件中的代码：

<template>
  <div>
    <p>{{ message }}</p>
    <child-component></child-component>
  </div>
</template>

<script>
import { bus } from './main';

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    bus.$on('update-message', (newMessage) => {
      this.message = newMessage;
    });
  }
}
</script>

子组件中的代码：

<template>
  <div>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { bus } from './main';

export default {
  methods: {
    changeMessage() {
      bus.$emit('update-message', 'Hello from child');
    }
  }
}
</script>

通过上述代码，我们实现了父子组件之间的通信。