Vue 中父子组件数据传递的巧妙方法：prop、$ref 和 $emit

2023-09-08 04:55:12

Vue.js 的组件化特性使开发人员能够创建模块化、可重用的代码块。父子组件之间的有效数据传递对于构建复杂的用户界面至关重要。本文将深入探讨 prop、ref 和 emit 这三种在 Vue 中用于父子组件之间数据传递的技术。

prop：

prop 是一种单向数据绑定机制，允许父组件向子组件传递数据。它们在子组件的模板中声明为属性。子组件无法修改父组件传递的数据，从而确保数据流的单向性。

代码示例：

<!-- 父组件 -->
<template>
  <child-component :message="message" />
</template>

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

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

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

$ref：

$ref 是一种特殊的属性，用于直接访问 DOM 元素或 Vue 组件实例。它允许父组件访问子组件的实例，从而可以对其进行修改或调用其方法。

代码示例：

<!-- 父组件 -->
<template>
  <child-component ref="childRef" />
</template>

<script>
  export default {
    methods: {
      updateChild() {
        this.$refs.childRef.count++
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <p>{{ count }}</p>
</template>

<script>
  export default {
    data() {
      return {
        count: 0
      }
    }
  }
</script>

$emit：

$emit 用于子组件向父组件发送事件。父组件可以监听这些事件并在其模板中响应它们。

代码示例：

<!-- 子组件 -->
<template>
  <button @click="emitEvent">Emit Event</button>
</template>

<script>
  export default {
    methods: {
      emitEvent() {
        this.$emit('myEvent')
      }
    }
  }
</script>

<!-- 父组件 -->
<template>
  <child-component @myEvent="handleEvent" />
</template>

<script>
  export default {
    methods: {
      handleEvent() {
        console.log('Event received in parent!')
      }
    }
  }
</script>