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的数据了
 

猜你喜欢

转载自www.cnblogs.com/zhangzhouy/p/11402209.html