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

vue中父子参数传递双向的方式不同

news 2025/8/17 14:47:56

在面试中被问到。平时也有用到，但是缺少总结

父传子。父页面会给子页面中定义的props属性传参，子页面接收
子传父。父页面需要监听事件来接收子页面通过$emit发送的消息
其实说的以上两种都是组件之间传递。还可以通过路由传参, 状态管理器的方式传递

下面是子传父

<!-- 子组件 -->
<template><button @click="sendMessage">Send Message</button>
</template><script>
export default {methods: {sendMessage() {this.$emit('messageSent', 'Hello from child!');}}
};
</script><!-- 父组件 -->
<template><div><ChildComponent @messageSent="handleMessage" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleMessage(message) {console.log(message); // 'Hello from child!'}}
};
</script>

这里是父传子

<!-- 父组件 -->
<template><div><ChildComponent :message="parentMessage" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Hello from parent!'};}
};
</script><!-- 子组件 -->
<template><div>{{ message }}</div>
</template><script>
export default {props: ['message']
};
</script>