Vue2.x下的各组件如何传递信息?(不使用Vuex)
  pkUoFFURI4TG 2023年11月01日 106 0
Vue

Vue2(选项式)
一,父组件向子组件传递数据:

介绍:在引用的子组件中定义 自定义属性 msg与user.可以通过v-bind 绑定要发送的数据。   在子组件中使用 props 接收自定义属性msg与user. 可以直接在模板中使用。但是如果想要修改的话建议传到data中,再进行修改。 代码如下:

 

二,子组件向父组件传递数据:

介绍:先在子组件的methods方法中定义一个触发的方法,在方法中使用 this.$emit(a,b). 定义自定义事件a.  b 为要传递的数据。  在父组件中引用的子组件中, 使用v-bind绑定 自定义事件 a.    后面设置方法c。 通过给方法c 传参的方式,获取从子组件传递过来的数据b.  代码如下: 

三,兄弟组件之间传递信息

介绍:有点像把子组件a的数据传递给父组件,父组件再将数据传递给子组件b.  只不过使用了 EventBus充当了中间的传递对象。

①:创建爱你eventBus.js 模块,并向外共享一个Vue的实例对象

②:在数据发送方,调用bus.$emit(‘事件名称’,要发送的数据)方法触发自定义事件

③:在数据接收方,调用bus.$on('事件名称',事件处理函数)方法注册一个自定义事件

 

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

上一篇: vue中的ajax 下一篇: vue脚手架的使用
  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  gYl4rku9YpWY   2024年05月17日   57   0   0 Vue
  JZjRRktyDDvK   2024年05月02日   81   0   0 Vue
  VlNAKfyhjjp9   2024年04月30日   78   0   0 Vue
  JNTrZmaOQEcq   2024年04月30日   54   0   0 Vue
  onf2Mh1AWJAW   2024年05月17日   60   0   0 Vue
  3A8RnFxQCDqM   2024年05月17日   59   0   0 Vue
pkUoFFURI4TG