Vue.js 父子组件之间的联系浅谈2

前面简单说了组件定义、注册后使用。

为什么要进行组件通信？

组件是一个聚合体，将来项目要合并，那么必然各个组件之间需要建立联系，这个联系就是数据通信

因为我们要做项目。必然产生的会有各个组件的联系。如何建立这种联系呢？再此我简要的谈一种最复杂的 同父组件子组件之间的联系方式。

首先我想通过比如 三个组件 Father son sister.

<template id="father">

<div>

<h3> 这里是父组件 </h3>

<Girl @fn = "fn"></Girl>

<Son ref = "son"></Son>

</div>

</template>

 

如果我想实现一个在sister点击一个按钮来改变同级组件son里的数据data 怎么办？

首先我们知道，只有自己内的方法可以改变自己的数据data。而son和sister之间没有之间联系。他们的桥梁是 Father。那么Father如何改变son的属性呢？因为数据是单向流动，只有子组件可以直接用父组件的行为方法，而颠倒则不行。必须找一个方法使得 Father 获得 son的一切属性。这个 便是ref。在模板里，son 加一个ref 。（这个ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。）

ref=son ，则 父组件的 $ref会储存所有son的一切。这时 父组件同样可以利用这个$ref来调用son上改变自己data的方法。 这时 只需要父组件与另一个女儿组件建立联系。（订阅 与 发布）。这时只需要在sister 里面定义一个方法 方法里写  this.$emit('父组件上改变son数据的那个方法'，后边可以传参)这样 sister调用自己这个方法 就可以改变 同级son的数据了