源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

vue2.0父子组件及非父子组件之间的通信方法

  • 时间:2020-07-07 23:53 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:vue2.0父子组件及非父子组件之间的通信方法
[b]1.父组件传递数据给子组件[/b] 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件:
<parent>
  <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰
</parent>
data(){
  return {
    msg: [1,2,3]
  };
}
子组件通过props来接收数据: [b]方式1:[/b]
props: ['childMsg']
[b]方式2 :[/b]
props: {
  childMsg: Array //这样可以指定传入的类型,如果类型不对,会警告
}
[b]方式3:[/b]
props: {
  childMsg: {
    type: Array,
    default: [0,0,0] //这样可以指定默认的值
  }
}
这样呢,就实现了父组件向子组件传递数据. [b]2.子组件与父组件通信[/b] 那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的. [b]子组件:[/b]
<template>
  <div @click="up"></div>
</template>
methods: {
  up() {
    this.$emit('upup','hehe'); //主动触发upup方法,'hehe'为向父组件传递的数据
  }
}
[b]父组件:[/b]
<div>
  <child @upup="change" :msg="msg"></child> //监听子组件触发的upup事件,然后调用change方法
</div>
methods: {
  change(msg) {
    this.msg = msg;
  }
}
[b]3.非父子组件通信[/b] 如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现通信. 所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.
let Hub = new Vue(); //创建事件中心
[b]组件1触发:[/b]
<div @click="eve"></div>
methods: {
  eve() {
    Hub.$emit('change','hehe'); //Hub触发事件
  }
}
[b]组件2接收:[/b]
<div></div>
created() {
  Hub.$on('change', () => { //Hub接收事件
    this.msg = 'hehe';
  });
}
这样就实现了非父子组件之间的通信了.原理就是把Hub当作一个中转站! 以上所述是小编给大家介绍的vue2.0父子组件及非父子组件之间的通信方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部