Vue2.0父子组件以及非父子组件之间的通信

Vue2.0父子组件以及非父子组件之间的通信

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

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

父组件：

<parent>
    <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰
</parent>

data(){
    return {
        msg: [1,2,3]
    };
}

子组件: （通过props属性来接收数据）

方式1：

props: ["childMsg"]

方式2：

props: {
    childMsg: Array //这样可以指定传入的类型，如果类型不对，会警告
}

方式3：

props: {
    childMsg: {
        type: Array,
        default: [0,0,0] //这样可以指定默认的值
    }
}

这样呢，就实现了父组件向子组件传递数据。

2.子组件与父组件通信

如果子组件想要传递数据给父组件，这在vue中是不允许的，因为vue只允许单向数据传递，这时候我们可以通过触发事件来通知父组件改变数据，从而达到改变子组件数据的目的.

子组件:

<template>
    <input v-model="inputmsg" />
</template>

watch: {
    inputmsg：function(){
        this.$emit("parentFun",this.inputmsg); 
        //一旦inputmsg改变就会触发父组件的parentFun方法，input的值为向父组件传递的数据
    }
}

父组件:

<parent>
    <child @parentFun="change"></child>  <!--监听子组件触发的parentFun事件,然后调用change方法-->
</parent>
methods: {
    change(msg) {
         console.log(msg);  
    }
}

3.非父子组件通信

如果2个组件不是父子组件那么如何通信呢？
在vuex加入后，对组件之间的通信有了更加清晰的操作，对于中大型的项目来说，一开始就把vuex的使用计划在内是明智的选择。然而在一些小型的项目，就需要一个比较便捷的解决方法。那么，eventBus的作用就体现出来了。
主要实现途径是在要相互通信的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发和监听来实现通信和参数传递。

1.我们需要新建一个js文件，来创建出我们的eventBus，我们把它命名为bus.js

import Vue from "vue";  
export default new Vue();  

2.这样我们就创建了一个新的vue实例。接下来我们在需要通信的组件中import它。

import Bus from "common/js/bus.js";  

3.组件A中进行操作

methods: {  
   addCart(event) {  
       Bus.$emit("getTarget", event.target);   
   }  
}  
//这里我们在组件A中每次执行addCart，都会在bus中触发这个名为"getTarget"的事件，并将点击事件的event.target顺着事件传递出去。

4.接着，我们要在组件B中的created()钩子中调用bus监听这个事件，并接收参数：

created() {  
  Bus.$on("getTarget", target => {  
     console.log(target);  
  });  
}  
//这样，在每次组件A触发addCart事件，就会把event.target传递到组件B中，并console出来。

所以eventBus的使用还是非常便捷的，但是如果是中大型项目，通信比较复杂，还是建议大家直接使用vuex。