Vue.js 父子组件双向绑定揭秘：全面掌握数据传递技巧

2023-06-21 02:12:41

Vue.js 父子组件双向绑定指南：掌握组件间数据传递的艺术

前言

在 Vue.js 的组件化开发中，父子组件之间的有效通信至关重要。双向绑定功能赋予我们轻松传递数据的能力，从而让组件之间无缝交互。在这篇全面的指南中，我们将深入探讨 Vue.js 父子组件双向绑定的方法，掌握 prop、emit 和 $emit 的用法，并通过示例代码提升您的开发技能。

从父组件向子组件传递数据：prop

prop 是传递数据的常用方式，允许父组件将数据向下传递给子组件，就像传递参数一样。使用 prop 非常简单：在父组件中声明 prop，并在子组件中使用 v-bind 绑定即可。

<!-- 父组件 -->
<ChildComponent :message="message" />

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>
<script>
export default {
  props: ['message']
}
</script>

父组件中的 message prop 会向下传递到子组件，在子组件中可以通过 message 访问。当父组件中的 message 发生变化时，子组件中的 message 也随之更新。

从子组件向父组件传递数据：emit

emit 相当于触发事件，允许子组件向上向父组件传递数据。在子组件中使用 $emit 方法触发事件，并在父组件中使用 v-on 监听该事件。

<!-- 子组件 -->
<template>
  <button @click="emitMessage">Send Message</button>
</template>
<script>
export default {
  methods: {
    emitMessage() {
      this.$emit('message', 'Hello, Vue!')
    }
  }
}
</script>

<!-- 父组件 -->
<ChildComponent @message="receiveMessage" />