vue的单向数据流？组件之间的通信？

一、vue的单向数据流

就是指在vue中数据只可以从父级流向子级；

---

在父传子的前提下，父级的数据改变子级的数据会随之改变，但是子级的数据改变，不会影响到父级的数据，浏览器会发出警告！
这是为了防止子组件意外改变父级的数据状态，从而导致数据流向难以理解；
子组件想要修改父组件，应该$emit发射一个自定义事件，父组件接收到后，由父组件修改；

二、vue的组件间通信

8.复杂的组件数据传递 vuex存储共享变量的容器

1.父组件==>子组件 props
2.子组件==>父组件 $emit触发自定义事件
3.父子 ref this.$refs.ref
4.兄弟传值 EventBus
5.$parents $root
6.祖先传递给子孙$attr $listeners
7.祖先传递给子孙 provide inject
8.复杂的组件数据传递 vuex存储共享变量的容器

---

1.父组件==>子组件 props

第一步，在父组件中使用子组件时，动态绑定属性；
第二步，在子组件中声明props属性，以接受从父组件传递过来的属性；

一般来说，父组件传递给子组件的值是不可以更改的（vue单向数据流），如果想要修改，有以下几种方法来源：

	1.父组件用sync修饰符，子组件通过$emit（'update:参数'，值）去修改；
	2.如果props是对象，在子组件中修改props；
	3.props是双向绑定的；

2.子组件==>父组件 $emit触发自定义事件

第一步，在子组件中定义数据；
第二步，在子组件中，需要emit一个事件（后续父组件监听的就是这个事件）this.$emit（事件名称，传递的参数），
最重要找准emit的时机；
第三步，在父组件使用子组件的时候，去注册事件；父组件注册了事件之后，可以监听所有子组件的事件，一旦有事件
触发（emit），就执行绑定的事件处理函数，数据就可以从子组件传递到父组件；

3.父子 ref this.$refs.ref

第一步，给子组件加上ref属性；
第二步，父组件通过this.$refs.ref可以获取子组件的方法和属性；

关于ref传值的实例

4.兄弟传值 EventBus 中央事件总线

和子组件向父组件传值类似，子组件传递事件名称，但是不在父组件中响应事件，而是在兄弟组件mounted中响应这个事件；
要想实现的话首先要学习三个功能：

　　1.触发x组件的a事件: x.$emit("a事件",参数...)

　　2.给x组件绑定a事件 x.$on("a事件",监听器函数)

　　3.给x组件解绑a事件 x.$off("a事件",监听器函数)

5.$root $parents

Vue组件传值除了prop和$emit，我们还可以直接获取组件对象：
根组件： $root // 单一对象
	表示当前组件树的根 Vue 实例，即new Vue({...根组件内容})。
	如果当前实例没有父实例，此实例将会是其自己。
	Vue子组件可以通过$root属性访问父组件实例的属性和方法
父组件：$parent // 单一对象
$parent表示父组件的实例，该属性只读

6.祖先传递给子孙$attr $listeners

$attrs接收除了props声明外的所有绑定属性（class、style除外），通过v-bind向下传递
$listeners接收除了带有.native事件修饰符的所有事件监听器，通过v-on向下传递

7.祖先传递给子孙 provide inject

简单来说就是在父组件中通过provide提供变量，然后在子组件中通过inject注入变量；
这种方式可以避免使用props传值时，必须将每一个属性都传递给子组件的写法；
注意：provide inject不是可响应的；但是如果你传入了一个可监听的对象，那么对象的property是可响应的。

8.复杂的组件数据传递 vuex存储共享变量的容器