揭秘Vue父子组件传值技巧，轻松实现数据交互

2023-12-13 20:32:12

Vue 父子组件之间的数据传递：全面的指南

简介

在 Vue.js 应用程序中，父子组件之间的通信对于实现复杂而动态的界面至关重要。本文将深入探讨父子组件传值的三种主要方法，同时提供实例代码和常见问题解答，帮助您轻松掌握这项技术。

传值方法

1. Props

Props 是一种单向数据绑定方式，允许父组件向子组件传递数据。子组件通过 props 选项声明要接收的数据，并且这些数据在子组件中不可变。

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

// 子组件
export default {
  props: ['message']
}

2. $emit

emit 是一种单向数据绑定方式，允许子组件向父组件传递数据。子组件通过 `emit` 方法触发一个事件，父组件可以通过事件监听器接收数据。

// 子组件
this.$emit('update-message', this.message)

// 父组件
export default {
  methods: {
    updateMessage(message) {
      // 在父组件中处理数据
    }
  }
}

3. 自定义事件

自定义事件是父子组件之间进行双向数据绑定的方式。与 $emit 类似，子组件触发一个自定义事件，但父组件必须监听该事件并手动传递数据。

// 子组件
this.$emit('custom-event', this.data)

// 父组件
export default {
  methods: {
    onCustomEvent(data) {
      // 在父组件中处理数据
    }
  }
}

代码示例

以下代码示例演示了使用 props、$emit 和自定义事件进行父子组件传值：

// 父组件 (props)
<template>
  <ChildComponent :message="message" />
</template>

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

// 子组件 (props)
<template>
  <p>{{ message }}</p>
</template>

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

// 父组件 ($emit)
<template>
  <ChildComponent @update-message="updateMessage" />
</template>

<script>
export default {
  methods: {
    updateMessage(message) { this.message = message }
  }
}
</script>

// 子组件 ($emit)
<template>
  <input v-model="message">
  <button @click="updateMessage">Update</button>
</template>

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

// 父组件 (自定义事件)
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

<script>
export default {
  methods: {
    handleCustomEvent(data) {
      // 在父组件中处理数据
    }
  }
}
</script>

// 子组件 (自定义事件)
<template>
  <input v-model="data">
  <button @click="emitCustomEvent">Update</button>
</template>

<script>
export default {
  data() { return { data: '' } },
  methods: {
    emitCustomEvent() { this.$emit('custom-event', this.data) }
  }
}
</script>