资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

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

我们拥有10余年网页设计和网站建设经验,从网站策划到网站制作,我们的网页设计师为您提供的解决方案。为企业提供成都网站建设、成都做网站、微信开发、小程序开发移动网站建设HTML5、等业务。无论您有什么样的网站设计或者设计方案要求,我们都将富于创造性的提供专业设计服务并满足您的需求。

文件目录如下图,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父子组件传值的原理是什么
URL网址:http://www.cdkjz.cn/article/jhooci.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220