vue父子组件通信props、$refs、$emit及非父子组件vuex的使用

一、props 通信方式。（父传子）

1.定义：
子组件的 props 选项能够接收来自父组件数据。
props 是单向绑定的：当父组件的属性变化时，将传给子组件，但是不会反过来。
这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
另外，每次父组件更新时，子组件的所有 props 都会更新为最新值。

2.使用方法：
父组件在调用子组件的时候加：aa-bb = “变量”，即 v-bind。然后在子组件里 props 用 aaBb 接收变量。

知识点：参数 aa-bb 不能使用驼峰，不然数据取不到，因为 html 标签属性不支持驼峰。多个单词组成的可以使用横杠连接：mytitle 或者 my-title，如果使用横杠命名的，子组件 props 中接收时不能使用横杠，要使用驼峰命名。

二、$refs 通信方式。（父传子，子传父）

1.定义：
对于 ref 官方的解释是：ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。

如果 ref 用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过 $refs 可能获取到在子组件里定义的属性和方法。
如果 ref 在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过 $refs 可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。

2.使用方法：
调用子组件的时候定义一个 ref

父组件主动获取子组件的数据，使用 $refs
this.$refs.name.属性
this.$refs.name.方法
子组件主动获取父组件的数据
this.$parent.数据
this.$parent.方法
以上这种方法可以改变父组件的数据。
比如 this.$parent.test=“www”，父组件的test就变成 www 了

【props和$refs之间的区别】

props 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用 props。

$refs 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且 ref 用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

三、$emit 通信方式。（子传父）

1.定义：
在Vue中，父组件监听子组件触发的事件，需要在子组件用使用 $emit 触发，在父组件中使用 v-on: / @ 自定义事件监听。

2.使用方法：
父组件在调用子组件的时候加自定义事件名 @eventName=“方法名”，即通过语法糖 v-on（简写@）来监听子组件提交的事件 eventName，eventName 是子组件提交的事件名称，也是父组件通过v-on监听的事件名称，然后在子组件里用 this.$emit(‘eventName’,[…args]) 触发，可以有两个参数；第一个参数必填，触发当前实例上的函数；第二个参数选填，是向父组件函数传递的数据。

注意：
1.在vue中，事件名不存在自动化的大小写转换，触发事件名需要完全匹配监听这个事件所用的名称。（驼峰就必须驼峰，短横线就必须短横线。）
2.v-on 就是用于绑定事件的。v-bind 用于绑定数据和元素属性。

四、vuex 通信方式。（非父子）

vuex理解可以看：vuex的全面用法总结

使用举例：

1.所建js文件。

2.传输数据vue组件。

注意：

3.接收数据vue组件。

4.再传一层。（根据需求）

五、bus（兄弟组件）