揭开 Vue.js 通信机制的面纱：父子组件、兄弟组件间的流畅交流

2023-11-28 09:38:58

Vue.js，这个前端开发框架的领军者，以其出色的性能和简便的语法备受开发者的青睐。在构建复杂的单页面应用程序时，组件化无疑是组织代码的利器。然而，随着组件数量的增多，组件之间的通信就成为了一大挑战。本篇文章将为你揭开 Vue.js 通信机制的面纱，从父子组件到兄弟组件，手把手教你轻松掌握数据传递的技巧。

1. 父子组件间的通信：双向数据绑定与道具

父子组件的通信就像父母与子女的交流，既有信息的传递，也有情感的沟通。在 Vue.js 中，父子组件间的通信可以分为两类：双向数据绑定和道具。

1.1 双向数据绑定：v-model

双向数据绑定是 Vue.js 中父子组件通信最常见的方式。通过 v-model 指令，子组件可以修改父组件的数据，父组件也可以修改子组件的数据，就像他们之间有一条神奇的纽带，数据实时同步，互通有无。

<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

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

在上面的代码中，父组件通过 v-model 指令将子组件的 input 元素与父组件的 message 数据绑定在一起。当用户在 input 元素中输入内容时，message 数据就会自动更新，反之亦然。这种双向数据绑定的方式非常方便，可以轻松实现父子组件之间的数据传递。

1.2 道具：props

道具是另一个父子组件通信的常用方式。道具允许父组件将数据传递给子组件，但子组件无法修改父组件的数据。这种单向数据流可以防止子组件意外修改父组件的数据，从而保证代码的稳定性。

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

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

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

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

在上面的代码中，父组件通过 :message 属性将 message 数据传递给子组件。子组件通过 props 选项接收 message 数据，并将其显示在页面上。需要注意的是，子组件无法修改父组件的 message 数据，只能读取。

2. 兄弟组件间的通信：parent 和 emit

兄弟组件的通信就像兄弟姐妹之间的交流，他们需要通过中间人来传递信息。在 Vue.js 中，这个中间人就是 parent 和 emit。

2.1 $parent：访问父组件实例

parent 属性允许兄弟组件访问其父组件的实例。通过 parent 属性，兄弟组件可以调用父组件的方法，访问父组件的数据，就像他们拥有父组件的所有权力一样。

<template>
  <div>
    <child-component-1></child-component-1>
    <child-component-2></child-component-2>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$parent.message = 'Hello from child component!'
    }
  }
}
</script>

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

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

在上面的代码中，child-component-1 组件通过 $parent 属性访问父组件的实例，并调用父组件的 sendMessage 方法。sendMessage 方法将 message 数据修改为 'Hello from child component!'。child-component-2 组件通过 v-model 指令将父组件的 message 数据绑定到 input 元素上。当用户在 input 元素中输入内容时，message 数据就会自动更新，child-component-2 组件也会随之更新。

2.2 $emit：触发自定义事件

$emit 方法允许兄弟组件触发自定义事件。当自定义事件被触发时，父组件或其他兄弟组件可以监听这个事件，并做出相应的反应。

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

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

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

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

在上面的代码中，child-component-1 组件通过 @message 事件监听器监听 message 事件。当 message 事件被触发时，handleMessage 方法就会被调用，并输出 'Hello from child component!'。child-component-2 组件通过 $emit 方法触发 message 事件，并传递 'Hello from child component!' 作为参数。