vue父子组件传值的原理是什么-创新互联

vue父子组件传值的原理是什么，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名申请、网页空间、营销软件、网站建设、鼓楼网站维护、网站推广。

文件目录如下图，example.vue是父组件，exampleChild.vue是子组件。

vue父子组件传值的原理是什么

父组件引入子组件，父组件html的代码如下：

子组件代码如下：

1，父组件向子组件传值。

在父组件中使用v-bind来绑定数据传给子组件，如我写的v-bind:message="parentMsg"，把message字段传给子组件，

vue父子组件传值的原理是什么

在子组件中使用props接收值，如props:['message']，接收父组件传过来的message字段，使用{{message}}就是可以使用父组件传过来的值了。

vue父子组件传值的原理是什么

2，子组件向父组件传值。

子向父传值需要一个“中转站”，如我写的getChildValue，命名随便写。

在子组件中使用$emit()来向父组件传值。第一个参数就是这个“中转站”，后面的参数是要传的值，可以是多个。

vue父子组件传值的原理是什么

在父组件中如下，也需要这个中转站来接收值

vue父子组件传值的原理是什么

getValue是接收子组件值的函数，参数val就是子组件传过来的值，这样就可以接收到子组件传过来的值了。

vue父子组件传值的原理是什么

看完上述内容，你们掌握vue父子组件传值的原理是什么的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

新闻标题：vue父子组件传值的原理是什么-创新互联
路径分享：http://wjwzjz.com/article/csiope.html