vue父子组件通信

1.父组件传递数据给子组件

父组件数据如何传递给子组件呢?可以通过props属性来实现

父组件:

//这里必须要用 - 代替驼峰data(){return{

msg: [1,2,3]

};

}

子组件通过props来接收数据:

方式1:props: [

'childMsg']

方式2 :props: {    childMsg: Array

//这样可以指定传入的类型,如果类型不对,会警告}

方式3:props: {    childMsg: {        type: Array,

default: [0,0,0]//这样可以指定默认的值}

}

2.子组件与父组件通信

子组件:

methods: {

testClick() {this.$emit('test','123');//主动触发test方法,'123'为向父组件传递的数据}

}

父组件:

      //监听子组件触发的test事件,然后调用change方法
methods: {

change(msg) {this.msg =msg;  // msg: 123

}

}

3.非父子组件通信

如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现通信.

所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.

let Hub=newVue();//创建事件中心

组件1触发:

methods: {

eve() {

Hub.$emit('change','hehe');//Hub触发事件}}

组件2接收:

created() {

Hub.$on('change', () => {//Hub接收事件this.msg = 'hehe';

});

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.子组件获取父组件data 子组件为bbb父组件为aaabbb想要获取aaa里的msg,msg1 父组件调用子组...
    玄月府的小妖在debug阅读 4,268评论 0 4
  • Vue父子组件通信 Web中的组件其实就是页面组成的一部分。 那组件之间的通信该怎么办?这是个重点(必须掌握),同...
    程序员之路阅读 3,808评论 0 2
  • 在使用vue的过程中,如果需要进行父子组件间的通信,通过查阅官方文档我们可以了解到只需要在子组件要显式地用 pro...
    fisher_zh阅读 3,237评论 0 1
  • 一、父传子1、可以在父组件上使用自定义属性绑定数据;2、在子组件中需要显示的用props声明自定义属性名,然后就可...
    LIsPeri阅读 1,573评论 0 1
  • 往年过春节,我总要回西都。带上一个包。包是当时尚未成为一个父亲的J陪我在城隍庙的一条街道买的。容量足够大,我去时只...
    老晁阅读 2,372评论 0 0