当前位置：首页 > news >正文

Vue-ref 与 props

news 来源：原创 2025/6/5 14:48:19

一、前言

在 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？何时使用 ref？

✅ 推荐使用 `props` 的场景：

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

✅ 推荐使用 `ref` 的场景：

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

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

六、最佳实践与注意事项

场景	推荐做法
父传子数据	使用 `props`
子传父数据	使用 `$emit`
父调用子方法	使用 `ref`
表单验证联动	使用 `props` + `watch` 或 `v-model`
避免在子组件中修改 props	应使用 `$emit` 通知父组件修改
避免频繁使用 `ref`	优先使用响应式数据驱动视图更新

七、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>