01：Vue 组件通信核心机制：父子组件传值的六种实现方式
在现代前端开发中，组件化思想是 Vue 框架的基石。而父子组件之间的数据交互（组件通信）则是构建复杂应用的基础能力。本文将详细探讨 Vue 中父组件向子组件传递数据的六种常见方式，包括 Prop 传递、自定义事件、v-model、Provide/Inject、ref 调用以及 $attrs 透传。
1. Props 传递数据
Props 是父子组件通信最基础也是最主要的方式。父组件通过 props 向子组件发送数据，子组件将其视为自己的属性。
1.1 静态传递
在父组件中，我们可以直接将字符串常量传递给子组件。
<!-- 父组件 Parent.vue -->
<template>
<ChildComponent title="静态标题" />
</template>1.2 动态绑定
使用 v-bind 缩写 :，将父组件的 data 或计算属性动态绑定到子组件的 props 上。
<!-- 父组件 Parent.vue -->
<template>
<ChildComponent :title="parentTitle" />
</template>
<script>
export default {
data() {
return {
parentTitle: "动态数据"
}
}
}
</script>2. 自定义事件 ($emit)
当子组件需要向父组件发送消息或数据时，子组件可以使用 $emit 触发自定义事件，父组件通过 v-on 或 @ 监听该事件。
<!-- 子组件 Child.vue -->
<template>
<button @click="handleClick">点击触发事件</button>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('custom-event', '从子组件传递的数据');
}
}
}
</script><!-- 父组件 Parent.vue -->
<template>
<ChildComponent @custom-event="handleData" />
</template>
<script>
export default {
methods: {
handleData(data) {
console.log("接收到的数据:", data);
}
}
}
</script>3. v-model 语法糖
v-model 是父组件与子组件进行双向数据绑定的常用语法糖。其本质是：子组件内部通过 props 接收 value，并通过 $emit('input') 更新父组件的数据。
3.1 默认用法
<!-- 父组件 -->
<template>
<ChildComponent v-model="inputValue" />
</template>
<script>
export default {
data() {
return { inputValue: "" };
}
}
</script>3.2 自定义 v-model
子组件可以定义自己的 prop 和事件名称。
<!-- 子组件 Child.vue -->
<script>
export default {
props: ['currentValue'],
emits: ['update:currentValue'],
methods: {
change(val) {
this.$emit('update:currentValue', val);
}
}
}
</script>4. Provide/Inject
虽然主要用于跨层级组件通信，但在父子组件间同样适用。父组件通过 provide 提供数据，子组件通过 inject 获取数据，数据响应式跟随变化。
<!-- 父组件 Parent.vue -->
<script>
export default {
provide() {
return {
themeColor: "blue",
getUser: () => ({ name: "Admin" })
}
}
}
</script><!-- 子组件 Child.vue -->
<script>
export default {
inject: ['themeColor', 'getUser']
}
</script>5. ref 调用方法与变量
通过 ref 标记子组件，父组件可以直接在模板中访问子组件的属性和方法。
<!-- 父组件 Parent.vue -->
<template>
<ChildComponent ref="childRef" />
<button @click="callChildMethod">调用子组件方法</button>
</template>
<script>
export default {
methods: {
callChildMethod() {
this.$refs.childRef.childMethod();
console.log(this.$refs.childRef.childData);
}
}
}
</script>6. $attrs 与 $listeners
这两个属性主要用于组件的属性透传和事件透传（在 Vue 3 Composition API 中主要是 attrs 和 expose 的使用）。
数据流向图
总结
掌握这六种方式是 Vue 开发者的必修课。Props 适用于单向数据流，$emit 适用于子向父反馈，v-model 适用于双向绑定场景，ref 适用于直接控制子组件内部状态，而 Provide/Inject 则解决了深层嵌套组件的数据共享问题。在实际开发中，根据业务场景选择最合适的方式，是写出高质量代码的关键。
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/qq_41840843/article/details/163314704
