vue组件的那点事

当前前端估计没有不知道vue这个渐进式框架，因为它容易上手，支持各类类库，各类优势，成为咱们开发单页应用的一个不二之选。下面是我在学习和工做中对组件之间通讯和交互方式的概括，但愿对你有所帮助。

父子组件交互

prop（父——>子）

父亲想跟儿子说一句：回来吃饭了。咱们能够这么作~~

首先简单建立两个组件一个叫father.vue一个叫child.vue，而后父组件father.vue在页面中引用自组建child.vue格式以下：

而后回到需求自己父亲要跟儿子说回来吃饭了。也就是父组件要向子组件传递一个信息。能够选择prop。简单的来讲Prop 是你能够在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。直观的解释就是：自定义的特性能够在对应使用的那个组件上的props属性获取到

至此咱们就实现了父组件与子组件的通讯。但值的注意有几点：

因为HTML属性对大小写并不敏感，因此你的自定义属性不能使用大写字母，若是使用可能会致使没法识别
若是你只是想单纯的传递一个字符串格式的数据，能够不使用（v-bind:自定义属性名）的写法。而是直接（属性名=值）

$emit（子——>父）

上面中的场景中提到了父亲叫儿子回来吃饭，可是儿子正在玩游戏须要20分钟以后才能回来，这个时候儿子要告诉父亲说：我在玩游戏，20分钟以后就回来。咱们能够这么作~~

使用$emit进行组件通讯的方式就像是咱们常说的发布订阅，这里子组件要说的话这一行为就是发布，父组件订阅这个事件来得到发布者发布的信息。

至此咱们就实现了子组件与父组件的通讯。但值的注意有几点： @childtosay的写法是v-on:childtosay的简写，监听/订阅这个方法的意思。
发布和订阅的方法名称必须统一，且不能有大写字母，若是名字过长可使用短横线在多个单词中链接

slot（父——>子）

父亲等了半个小时，儿子才回来，有点生气。准备跟儿子约法三章：1.天天晚上七点以前必须回来吃饭。2.出去玩以前要征得老爸赞成。3.不能离家太远，在附近玩。咱们能够这么作~~

如今的需求是咱们须要向子组件传递多条数据，可能这些数据在页面显示的时候还要有必定的样式。那么prop的通讯方式就不太适用了。这个时候插槽的功能就显得尤其重要了。

固然了若是多个插槽，位置顺序有明显变化的，你能够给它们起一个名字来具体区分：

//father.vue
<child>
<p  class="red"  slot="rouss">天天晚上七点以前必须回来吃饭。</p>
<p  class="red"  slot="rous">出去玩以前要征得老爸赞成</p>
<p  class="red"  slot="rou">不能离家太远，在附近玩</p>
</child>
复制代码

//child.vue
<div>
<h5>我是儿子</h5>第1条：
<slot  name="rou"></slot>第2条：
<slot  name="rous"></slot>第3条：
<slot  name="rouss"></slot>
</div>
复制代码

这样也就确保了多个插槽的位置

$parent（子——>父）

若是父亲口袋中有儿子的试卷，可是成绩只有59分，儿子不想被骂，要偷偷改掉试卷的分数，能够尝试这么作~~

老师从小教育咱们作人要诚实，因此儿子这样的行为是坚定不可取的，一样的咱们在vue的使用中也不推荐这样修改父组件的data数据。

$ref(父——>子)

和$parent相似的还有$ref，它可让你在父组件中访问子组件的属性和值，用法以下：

EventBus （父子，兄弟之间都适用）

爸爸和儿子都想看电视，可是遥控器放在谁的手里另一方都不一样意，这个时候家里的实际掌权者母亲大人就说：遥控器给我，大家谁要看什么节目跟我说，我给大家安排。这里面母亲大人的角色就是EventBus

EventBus 就是在声明一个vue的实例对象，全部公共的方法和属性均可以放在这个实例上面，这样父子组件就均可以进行访问了，可是若是是大型项目，仍是推荐使用vuex

vuex（父子，兄弟之间都适用）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，用法不少，小弟就不在这里献丑了。

写在最后：小弟学艺不精，水平有限，上面的内容是我对vue的一个简单理解，但愿对你有所帮助，固然若是你发现哪里有问题，请及时指正，不胜感激。