Vue 中 父子 组件之间传递信息可以通过
pro ps和$emit事件来
实现。
1. 父
组件向子
组件传递信息：
在父
组件 中通过
pro ps将数据传递给子
组件，子
组件通过
pro ps接收数据即可。
父
组件：
<template><div><child-component :message="message"></child-component></div></template><script>import ChildComponent from 'https://blog.csdn.net/weixin_/article/details/ChildComponent.vue'export default {components: {ChildComponent},data() {return {message: 'Hello, child component!'}}}</script>
子
组件：
<template><div>{{ message }}</div></template><script>export default {pro ps: {message: String}}</script>
2. 子
组件向父
组件传递信息：
在子
组件 中通过$emit事件触发父
组件的方法，将需要传递的数据作为参数传递即可。
子
组件：
<template><div><button @click="sendMessage">Send message to parent</button></div></template><script>export default {methods: {sendMessage() {this.$emit('send-message', 'Hello, parent component!')}}}</script>
父
组件：
<template><div><child-component @send-message="receiveMessage"></child-component></div></template><script>import ChildComponent from 'https://blog.csdn.net/weixin_/article/details/ChildComponent.vue'export default {components: {ChildComponent},methods: {receiveMessage(message) {console.log(message)}}}</script>
在子
组件 中通过$emit触发了send-message事件，父
组件通过@send-message监听到事件，并且将传递的数据作为参数传递给了receiveMessage方法。
到此这篇vue2父子组件传值props（vue父子组件如何传递参数）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/36310.html