到了Vue2.x有哪些变化？—— 组件通信

一、父子组件传递数据

默认情况下父子组件的数据是不共享地

推荐一个Vue辅助工具 —— vue-devtool下载ps：具体查看请参照vue-devtools安装

1. 子组件获取父组件数据（儿子获取父亲数据）

通过选项对象中的props，也就是下面的数据传输过程：

知识点（关于props）：

  //方式一：用数组的方式
  props:['m','myMsg']
  //方式二：用json的形式，也就是给数据定义一个数据类型
  props:{
     m': String,
    'myMsg': Number
  }

之前在Vue1.x中，子组件可以更改父组件信息（数据），可以是同步的sync（:msg.sync="父组件数据名"）。在利用props获取父级数据的时候加上sync

//注意这个是Vue1.x版本

    
    

        父级：{{ a }}
           
    

现在Vue2.x，子组件不能直接给父组件数据直接赋值操作（也就是直接修改数据），因为当项目大的时候一个子组件数据更改会引发一系列问题就很麻烦。

但是我们在项目中往往会需要某个子组件更改父组件内数据。这里请看下面

** 父组件每次传一个对象给子组件，利用元素js中对象是引用的（在内存中共用一块地址）**

    
    

        父级：{{ giveData.a }}
         
    

如图当点击按钮更新子组件数据后：

2. 父组件获取子组件数据（父亲获取儿子数据）

原理：*子组件主动把自己的数据通过$emit()，发送到父级，父组件的模板中有个“事件”，父组件接收的时候用的是“@”（是自定义事件，若有子级数据发送就会触发）

子级：vm.$emit(事件名,数据);
父级： v-on:xxx="xxx" <===> @xxx="xxx"

Ex代码：

点击子组件发送数据按钮后如下：

3. 兄弟组件之间获取数据（兄弟之间）

首先准备一个var Event = new Vue();，用Event身上的方法
其次在需要发送数据的组件上：Event.$emit(事件名称，数据)
再次在需要接收数据的组件上：
Event.$on(事件名称,function(data){ //data }.bind(this))

Ex代码：把组件A和组件B的数据传到组件C上

当点击传输A数据给C和传输B数据给C结果如下：

预告—— 下面将会说Vue2.x中动画（transition）的那些变化。。。