使用Vue.js实现组件间通信（Vue.js）

在Vue.js中，组件是构建用户界面的基本单位，而组件间的通信是组件化开发中非常重要的一部分。Vue.js提供了多种方式来实现组件间的通信，包括props和事件等。

Props（父子组件通信）

父子组件之间的通信是最常见的一种情况。可以通过props将数据从父组件传递给子组件，子组件通过props接收父组件传递过来的数据。

<template>
  <div>
    <ChildComponent :message="message"></ChildComponent>
  </div>
</template>

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

export default {
  data() {
    return {
      message: 'Hello Vue.js'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

子组件接收父组件传递的数据可以通过props进行定义：

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

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

事件（兄弟组件通信）

当兄弟组件之间需要进行通信时，可以使用一个共同的父组件来传递数据和事件。在父组件中定义一个数据，然后通过子组件之间的事件进行数据传递。

<template>
  <div>
    <BrotherComponent1 :message="message" @update-message="updateMessage"></BrotherComponent1>
    <BrotherComponent2 :message="message"></BrotherComponent2>
  </div>
</template>

<script>
import BrotherComponent1 from './BrotherComponent1.vue'
import BrotherComponent2 from './BrotherComponent2.vue'

export default {
  data() {
    return {
      message: 'Hello Vue.js'
    }
  },
  components: {
    BrotherComponent1,
    BrotherComponent2
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage
    }
  }
}
</script>

其中，BrotherComponent1通过update-message事件通知父组件更新message的值：

<template>
  <div>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$emit('update-message', 'New Message')
    }
  }
}
</script>

BrotherComponent2通过props接收更新后的message：

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

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

单例模式

如果在多个组件之间需要共享数据或者进行任意组件间的通信，可以使用Vue.js中提供的单例模式。

可以使用Vue实例的$on和$emit方法来管理事件，实现组件间的通信。在创建Vue实例的时候，可以在全局中定义一个事件中心：bus。

// main.js
import Vue from 'vue'

const bus = new Vue()

Vue.prototype.$bus = bus

然后，在任意两个组件中可以通过$bus.$emit和$bus.$on来进行通信：

<!-- ComponentA.vue -->
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$bus.$emit('message', 'Hello Vue.js')
    }
  }
}
</script>

<!-- ComponentB.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

本文来自极简博客，作者：烟雨江南，转载请注明原文链接：使用Vue.js实现组件间通信（Vue.js）