vue组件通信。prop，ref,emit的用法与区别

---

前言

        相信对于很多vue初学者来说，看到组件通信这块的时候，跟我一样懵逼，完全摸不清啥是啥，搞到最后，连父子组件都区分不清了。

        下面这篇文章就是我对vue父子组件通信的研究，写的比较啰嗦，但是，对于一个初学者来说，不啰嗦一点，下次忘记了在看，可能又看不懂了。        

一、prop、ref、emit的区别

        我这边对以上三点的区别做一些我自己理解上的区别，用到的语言可能不专业，但是比较通俗易懂。

        prop:父组件向子组件传值，着重于传递数据，不能调用子组件的方法

        ref:父组件向子组件传值，主要调用子组件的属性方法，不擅长数据传递

        emit:子组件向父组件传值

二、具体使用方法

1.prop

        官方文档

        所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

        额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

        注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

参考地址

 参考地址

2.ref

官方地址

官方地址

官方地址

3.emit

官方地址

$emit来触发一个事件，第一个参数：事件名称；第二个参数：可携带的一些参数。

在组件的父级可以通过事件绑定的方式，来接收触发事件

vm.$emit( event, arg )---event：事件名，arg:参数

---

总结

      总的来说，组件的通信方法就以上几点，看懂的话，写项目应该就没什么大问题了