vue的父传子，子传父，非父子之间的传值

VUE常用的三种传值方式
1.父传子
2.子传父
3.非父子传值

父子之间的传值
在vue.js中，父子组件之间的关系可以理解为props down(父传子props) events up(子传父用事件)，如图所以：
想要搞明白父传子，必须了解prop：
什么是prop：
Prop是用来传递数据的一种自定义属性。
Prop是单向数据流。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

1.父传子:

首先你得建立两个 vue组件，假定一个是father，另一个是child
在father组件里写:

在child组件里写：

把子组件引进到父组件里面

记住，引进来之后就注册，在父组件里面注册


然后开始绑定数据， 父组件里data写name（name是自定义的）

data数据里的name，要和上面child自定义标签传递的值要对应上

最后在子组件里面用 props 方法承接你要传给子组件的数据

在上面的模板中运用传递来的参数

到这里父传子的通信已经写完了，下面附上整个代码：
父组件整体的代码：

子组件的整体代码

2. 子传父

子传父需要用事件来传值

首先我们就在子组件里面添加点击事件


然后我们在父组件里用 v-on 来接手子组件传递的值，v-on可简写成@

接着在父组件的下面的methods方法里写：

写到这里子传父就实现，但有的同学会发现父传子就不能实现了，这时我们可以用 watch 来监听，
在父组件里监听子组件里传递过来的值：

此时父子组件的通信就完成了，子传父还是父传子都可以了。
下面附上子传父的完整代码
子组件里的完整代码：

父组件里的完整代码：

3.非父子之间传值（兄弟传值）

非父子之间的传值要有一个公共的父组件，非父子之间的传值就要在这个公共的父组件里面实现传值。 非父子之间的传值还要一个公共的仓库文件（bus.js）
首先创建一个bus.js的文件，
在bus.js里面写：

在公共的父组件里导入两个兄弟组件并注册：
先导入：

在注册：

千万不要忘了还要自定义这两个兄弟组件标签（自定义标签在template>div中）

最后再附上两个兄弟组件里面的完整代码：
brother1

brother2

以上三种vue之间的通信方式就写完了。