组件通信，谱写前端协奏曲：Vue.js 高级指南第十章

2024-02-18 06:34:58

父子组件通信：让组件对话

在 Vue.js 中，组件就像乐高积木，我们可以将它们拼装起来构建复杂而灵活的应用程序。而组件之间的通信就像乐高的连接点，它使组件能够相互交互并共享数据。

父子组件通信 是最常见的一种组件通信方式，它类似于父母和子女之间的对话。父组件（相当于父母）可以通过 prop（属性）选项向子组件（子女）传递数据。而子组件可以通过 emit 事件向父组件发送数据。

Prop 选项：父组件的馈赠

Prop 选项就像父组件给子组件的一份礼物。它是父组件向子组件传递数据的一种方式。Prop 选项是一个对象，其中包含了要传递给子组件的数据以及数据类型。子组件可以通过 props 选项接收父组件传递的数据。

例如，假设我们有一个父组件 ParentComponent，它想向子组件 ChildComponent 传递一条信息。我们可以通过以下方式使用 prop 选项：

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

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

在父组件中，我们使用 :message="message" 将 message 数据传递给子组件。

在子组件中，我们使用 props 选项接收父组件传递的数据：

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

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

现在，子组件就可以访问父组件传递的 message 数据了。

Emit 事件：子组件的回音

Emit 事件就像子组件对父组件的回音。它是子组件向父组件发送数据的一种方式。Emit 事件是一个方法，它接受两个参数：事件名称和事件参数。父组件可以通过 v-on 指令来监听子组件发出的事件。

例如，假设我们有一个子组件 ChildComponent，它想向父组件 ParentComponent 发送一条信息。我们可以通过以下方式使用 emit 事件：

<template>
  <div>
    <button @click="handleClick">Send message</button>
  </div>
</template>

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

在子组件中，我们使用 this.$emit('message', 'Hello, world!') 向父组件发送 message 事件，并传递 Hello, world! 作为事件参数。

在父组件中，我们使用 v-on:message 指令来监听子组件发出的 message 事件：

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

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message) // Hello, world!
    }
  }
}
</script>

现在，当子组件触发 handleClick 事件时，父组件就会收到 message 事件并调用 handleMessage 方法。

兄弟组件通信：让兄弟姐妹交谈

兄弟组件通信就像兄弟姐妹之间的对话。它们没有直接的父子关系，但需要相互通信。兄弟组件可以通过事件总线或 Vuex 来实现通信。

事件总线：组件之间的信使

事件总线就像组件之间的信使。它是一个全局对象，可以用来在组件之间传递事件。组件可以通过 on 方法来监听事件总线发出的事件，也可以通过 emit 方法向事件总线发送事件。

例如，假设我们有两个兄弟组件 SiblingComponent1 和 SiblingComponent2，它们需要相互通信。我们可以通过以下方式使用事件总线：

在 SiblingComponent1 中：

<template>
  <div>
    <button @click="handleClick">Send message</button>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$on('message', this.handleMessage)
  },
  methods: {
    handleClick() {
      this.$emit('message', 'Hello, world!')
    },
    handleMessage(message) {
      console.log(message) // Hello, world!
    }
  }
}
</script>

在 SiblingComponent2 中：

<template>
  <div>
    <button @click="handleClick">Send message</button>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$on('message', this.handleMessage)
  },
  methods: {
    handleClick() {
      this.$emit('message', 'Hello, world!')
    },
    handleMessage(message) {
      console.log(message) // Hello, world!
    }
  }
}
</script>

现在，当 SiblingComponent1 触发 handleClick 事件时，SiblingComponent2 就会收到 message 事件并调用 handleMessage 方法。

Vuex：组件间数据共享中心

Vuex 就像组件间数据共享中心。它是一个状态管理库，可以用来在组件之间共享数据。Vuex 存储在一个全局状态对象中，组件可以通过 getter 和 mutation 来访问和修改状态。

例如，假设我们有两个兄弟组件 SiblingComponent1 和 SiblingComponent2，它们需要共享一个计数器。我们可以通过以下方式使用 Vuex：

// store.js
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  }
})

在 SiblingComponent1 中：

<template>
  <div>
    <button @click="incrementCount">Increment count</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  computed: {
    ...mapMutations(['increment'])
  },
  methods: {
    incrementCount() {
      this.increment()
    }
  }
}
</script>

在 SiblingComponent2 中：

<template>
  <div>
    <button @click="decrementCount">Decrement count</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  computed: {
    ...mapMutations(['decrement'])
  },
  methods: {
    decrementCount() {
      this.decrement()
    }
  }
}
</script>

现在，当 SiblingComponent1 触发 incrementCount 事件时，Vuex 就会调用 increment mutation，将计数器加 1。当 SiblingComponent2 触发 decrementCount 事件时，Vuex 就会调用 decrement mutation，将计数器减 1。

常见问题解答