Vue2-父组件与子组件参数互传
在 Vue2 中，父组件与子组件的参数传递是组件通信的核心内容，主要通过以下方式实现：
一、父组件向子组件传值（props）
父组件通过 props 向子组件传递数据，子组件通过声明接受后使用。
1、父组件中：
<template><div id="app"><!-- 传递动态值（使用v-bind） --><ChildComponent:message="parentMessage":user-info="userInfo" /></div>
</template>
<script>
import ChildComponent from './child.vue';
export default {components: { ChildComponent },data(){return {parentMessage: '我是父组件的动态消息',userInfo: { name: '张三', age: 20 }}},methods: {},
}
</script><style></style>
2、子组件中：
通过 props 选项声明接受父组件传递的数据，可指定类型、默认值等。
<template><div id="app"><p>{{ title }}</p><p>{{ message }}</p><p>{{ userInfo.name }}</p></div>
</template><script>
export default {// 方式2：详细配置（推荐，可做类型校验、默认值等）props: {title: {type: String, // 类型required: true // 是否必传},message: {type: String,default: '默认消息' // 默认值},userInfo: {type: Object,default() { // 对象/数组的默认值需用函数返回return { name: '未知', age: 0 };}}}
};
</script>
二、子组件向父组件传值 （$emit事件）
子组件通过触发自定义事件（$emit）向父组件传递数据，父组件监听事件并处理。
1、子组件中：
通过 this.$emit('事件名',传递的数据) 触发事件。
<template><div><button @click="sendDataToParent">向父组件传值</button></div>
</template><script>
export default {data() {return {childMessage: '我是子组件的数据'};},methods: {sendDataToParent() {// 触发自定义事件，并传递数据（可传多个参数）this.$emit('child-event', this.childMessage, 123);}}
};
</script>2、父组件中：
监听子组件触发的事件，通过事件处理函数接受数据。
<template><div><!-- 监听子组件的自定义事件 --><ChildComponent @child-event="handleChildEvent" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },methods: {handleChildEvent(msg, num) { // 接收子组件传递的参数console.log('子组件传来的数据：', msg, num); // 输出：我是子组件的数据 123}}
};
</script>