Vue父子组件参数传递方法（vue3.0父子组件传值）

在 Vue 中，父子组件之间的参数传递是常见的需求，主要通过 Props 和 自定义事件 实现。以下是详细说明和代码示例：

一、父组件向子组件传递参数（Props）

父组件通过 属性 向子组件传递数据，子组件通过 props 接收。

1. 子组件定义 Props

vue

<!-- ChildComponent.vue -->

<template>

<div>

<p>接收父组件的参数: {{ parentData }}</p>

</div>

</template>

<script>

export default {

props: {

// 基础类型检查 + 默认值

parentData: {

type: String,

default: '默认值'

}

}

}

</script>

2. 父组件传递数据

vue

<!-- ParentComponent.vue -->

<template>

<div>

<ChildComponent :parent-data="message" />

</div>

</template>

<script>

import ChildComponent from './ChildComponent.vue';

export default {

components: { ChildComponent },

data() {

return {

message: '来自父组件的数据'

}

}

}

</script>

关键点：

• 使用 :parent-data（动态绑定）传递数据。
• 子组件中 props 的命名推荐 kebab-case（如 parent-data），在子组件中转换为 camelCase（如 parentData）。

二、子组件向父组件传递参数（自定义事件）

子组件通过 $emit 触发事件，父组件通过 v-on 监听事件并接收数据。

1. 子组件触发事件

vue

<!-- ChildComponent.vue -->

<template>

<button @click="sendDataToParent">传递数据给父组件</button>

</template>

<script>

export default {

methods: {

sendDataToParent() {

this.$emit('child-event', '来自子组件的数据');

}

}

}

</script>

2. 父组件监听事件

vue

<!-- ParentComponent.vue -->

<template>

<div>

<ChildComponent @child-event="handleChildEvent" />

<p>接收子组件的参数: {{ childData }}</p>

</div>

</template>

<script>

import ChildComponent from './ChildComponent.vue';

export default {

components: { ChildComponent },

data() {

return {

childData: ''

}

},

methods: {

handleChildEvent(data) {

this.childData = data; // 接收子组件传递的数据

}

}

}

</script>

关键点：

• 使用 @child-event 监听子组件事件。
• 子组件通过 this.$emit('事件名', 数据) 触发事件。

三、其他常用方式

1. 使用 ref 直接访问子组件

父组件通过 ref 获取子组件实例，直接调用子组件的方法或访问数据。

vue

<!-- ParentComponent.vue -->

<template>

<ChildComponent ref="childRef" />

</template>

<script>

export default {

mounted() {

this.$refs.childRef.childMethod(); // 调用子组件方法

console.log(this.$refs.childRef.childData); // 访问子组件数据

}

}

</script>

2. 使用 v-model 实现双向绑定（Vue 2/3 语法不同）

Vue 2：

vue

<!-- 父组件 -->

<ChildComponent v-model="message" />

<!-- 子组件 -->

<script>

export default {

props: ['value'],

methods: {

updateValue(newVal) {

this.$emit('input', newVal); // 触发 input 事件

}

}

}

</script>

Vue 3：

vue

<!-- 父组件 -->

<ChildComponent v-model:title="message" />

<!-- 子组件 -->

<script setup>

defineProps(['title']);

defineEmits(['update:title']);

</script>

四、注意事项

1. 单向数据流：Props 是单向的，子组件不应直接修改父组件传递的值。若需要修改，可通过事件通知父组件。
2. 事件命名规范：自定义事件名推荐使用 kebab-case（如 update-data）。
3. 复杂场景：跨层级组件通信可使用 Vuex/Pinia（状态管理）或 provide/inject。

通过以上方法，可以灵活实现 Vue 父子组件之间的参数传递。根据场景选择合适的通信方式！