摘要：在 Vue 中，父子组件之间的参数传递是常见的需求，主要通过Props和自定义事件实现。以下是详细说明和代码示例：
在 Vue 中，父子组件之间的参数传递是常见的需求，主要通过 Props 和 自定义事件 实现。以下是详细说明和代码示例：
一、父组件向子组件传递参数（Props）
父组件通过 属性 向子组件传递数据，子组件通过 props 接收。
1. 子组件定义 Props
vue
接收父组件的参数: {{ parentData }}
export default {
props: {
// 基础类型检查 + 默认值
parentData: {
type: String,
default: '默认值'
}
}
}
2. 父组件传递数据
vue
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data {
return {
message: '来自父组件的数据'
}
}
}
关键点：
使用 :parent-data（动态绑定）传递数据。子组件中 props 的命名推荐 kebab-case（如 parent-data），在子组件中转换为 camelCase（如 parentData）。二、子组件向父组件传递参数（自定义事件）
子组件通过 $emit 触发事件，父组件通过 v-on 监听事件并接收数据。
1. 子组件触发事件
vue
传递数据给父组件
export default {
methods: {
sendDataToParent {
this.$emit('child-event', '来自子组件的数据');
}
}
}
2. 父组件监听事件
vue
接收子组件的参数: {{ childData }}
export default {
components: { ChildComponent },
data {
return {
childData: ''
}
},
methods: {
handleChildEvent(data) {
this.childData = data; // 接收子组件传递的数据
}
}
}
关键点：
使用 @child-event 监听子组件事件。子组件通过 this.$emit('事件名', 数据) 触发事件。三、其他常用方式
1. 使用 ref 直接访问子组件
父组件通过 ref 获取子组件实例，直接调用子组件的方法或访问数据。
vue
export default {
mounted {
this.$refs.childRef.childMethod; // 调用子组件方法
console.log(this.$refs.childRef.childData); // 访问子组件数据
}
}
2. 使用 v-model 实现双向绑定（Vue 2/3 语法不同）
Vue 2：
vue
export default {
props: ['value'],
methods: {
updateValue(newVal) {
this.$emit('input', newVal); // 触发 input 事件
}
}
}
Vue 3：
vue
defineProps(['title']);
defineEmits(['update:title']);
四、注意事项
单向数据流：Props 是单向的，子组件不应直接修改父组件传递的值。若需要修改，可通过事件通知父组件。事件命名规范：自定义事件名推荐使用 kebab-case（如 update-data）。复杂场景：跨层级组件通信可使用 Vuex/Pinia（状态管理）或 provide/inject。通过以上方法，可以灵活实现 Vue 父子组件之间的参数传递。根据场景选择合适的通信方式！
来源：老客数据一点号
