首页 > 其他 > 详细

Vue组件之间的传值

时间:2021-04-26 11:07:06      阅读:20      评论:0      收藏:0      [点我收藏+]

一、父组件给子组件传值:父组件在引入的组件中传值,子组件使用Prop属性。

在父组件中引入子组件

技术分享图片

 

 

在子组件中定义props属性,有两种定义模式,一种是数组,一种是对象形式的。一般我们需要将这个值赋值给另外一个变量,便于操作。PS:msg的类型如果不赋值进行改变可能会报错。

技术分享图片技术分享图片

 

另外,我们如果对数值进行监听,以便于进一步进行操作,可使用watch,在这里进行代码逻辑的更改。

技术分享图片

 

 

 二、子组件传值给父组件,子组件使用this.$emit方法,父组件调用在引入的子组件中调用方法。

1.在子组件中定义一个方法

技术分享图片

 

 

技术分享图片

 

 

 2.在父组件中引入的子组件的位置添加方法,方法名为子组件中this.$emit中的第一个参数

技术分享图片

 

 技术分享图片

 

 三、兄弟组件之间的传值。使用事件车的方式,bus.$on方式

 1.创建一个单独的文件夹‘,bus.js,文件内容也简单,就两行代码

技术分享图片技术分享图片

 

 2.有两个组件如下

技术分享图片

 

 在A组件中定义一个方法,bus.$emit(),两个参数

技术分享图片

 

 技术分享图片

 

 

 在B组件中引入

技术分享图片

 

Vue组件之间的传值

原文:https://www.cnblogs.com/tdcqcrtd/p/14702806.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!