Vue-ref 与 props

一、前言

在 Vue 的组件化开发中，父子组件之间的数据传递 是一个非常核心的需求。常见的场景包括：

• 父组件向子组件传递数据；
• 子组件向父组件发送事件或数据；
• 父组件直接调用子组件的方法或访问其属性。

Vue 提供了多种机制来实现这些通信方式，其中最常用的是：

• 使用 props 实现 父传子 数据流；
• 使用 $emit 实现 子传父 事件通知；
• 使用 ref 实现 父组件对子组件的直接访问与操作。

本文将重点讲解 ref 与 props 的使用方式、适用场景以及它们之间的区别与联系，帮助你在不同需求下选择合适的通信策略。

二、什么是 props？

定义：

props 是 Vue 组件之间进行数据传递的一种机制，它允许父组件通过属性的方式向子组件传递数据。

✅ props 是单向数据流，只能由父组件传给子组件，不能反向修改（除非使用 .sync 或 v-model）。

示例：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

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

<!-- ChildComponent.vue -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

在这个例子中，父组件通过 :message 向子组件传递了一个字符串值。

三、什么是 ref？

定义：

ref 是 Vue 提供的一个特殊属性，用于在模板中为某个元素或组件注册一个引用标识。通过这个标识，我们可以在 JavaScript 中直接访问该 DOM 元素或组件实例。

⚠️ ref 是一种命令式访问方式，打破了 Vue 的响应式原则，应谨慎使用。

示例：

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  methods: {
    callChildMethod() {
      this.$refs.childRef.sayHello()
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>我是子组件</div>
</template>

<script>
export default {
  methods: {
    sayHello() {
      console.log('Hello from child component')
    }
  }
}
</script>

在这个例子中，父组件通过 this.$refs.childRef 直接调用了子组件定义的方法。

四、props vs ref：区别与联系

📌 通俗理解：

• props 是“告诉子组件应该怎么做”；
• ref 是“我直接帮你做”。

五、何时使用 props？何时使用 ref？

✅ 推荐使用 props 的场景：

• 父组件需要传递数据给子组件；
• 子组件根据传入的数据渲染不同的 UI；
• 保持组件间松耦合，提升可维护性。

✅ 推荐使用 ref 的场景：

• 父组件需要主动调用子组件的方法（如刷新、提交等）；
• 需要获取子组件的状态（如表单验证结果）；
• 操作 DOM 元素（如聚焦输入框、滚动条控制等）；

⚠️ 注意：过度使用 ref 会导致代码难以维护，破坏 Vue 的响应式理念。

六、最佳实践与注意事项

七、Vue 3 Composition API 中的 ref 使用

在 Vue 3 的 <script setup> 语法中，使用 ref 更加简洁。

示例：

<script setup>
import { ref } from 'vue'
const childRef = ref()

function callChild() {
  childRef.value.sayHello()
}
</script>

<template>
  <ChildComponent ref="childRef" />
  <button @click="callChild">调用子组件方法</button>
</template>

八、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！