Vue中通信方式
1-props / $emit
父组件向子组件传值
父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信
下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:[‘红楼梦’, ‘西游记’,‘三国演义’]
总结: prop 只可以从上一级组件传递到下一级组件(父子组件),即所谓的单向数据流。而且 prop 只读,不可被修改,所有修改都会失效并警告
子组件向父组件传值
对于$emit 我自己的理解是这样的: $emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。 通过一个例子,说明子组件如何向父组件传递数据。
在上个例子的基础上, 点击页面渲染出来的ariticle的item, 父组件中显示在数组中的下标
2-$children / $parent
上面这张图片是vue官方的解释,通过 p a r e n t 和 parent和 parent和children就可以访问组件的实例,拿到实例代表什么?代表可以访问此组件的所有方法和data。接下来就是怎么实现拿到指定组件的实例。
使用方法
要注意边界情况,如在#app上拿 p a r e n t 得到的是 n e w V u e ( ) 的实例,在这实例上再拿 parent得到的是new Vue()的实例,在这实例上再拿 parent得到的是newVue()的实例,在这实例上再拿parent得到的是undefined,而在最底层的子组件拿 c h i l d r e n 是个空数组。也要注意得到 children是个空数组。也要注意得到 children是个空数组。也要注意得到parent和 c h i l d r e n 的值不一样, children的值不一样, children的值不一样,children 的值是数组,而$parent是个对象
总结
上面两种方式用于父子组件之间的通信, 而使用props进行父子组件通信更加普遍; 二者皆不能用于非父子组件之间的通信。
3-Provide / reject
概念
provide/ reject 是vue2.2.0新增的api, 简单来说就是父组件中通过provide来提供变量, 然后再子组件中通过reject来注入变量。
特别注意
provide/ reject 不是响应式的,可能之所以这样设计,是为了避免数据的混乱。就如同props不能被子组件直接修改一样。
举例验证
假设有三个组件: A.vue、B.vue、C.vue 其中 C是B的子组件,B是A的子组件
4-Ref / refs
Ref
如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素,如果用在子组件上,引用就指向组件实例,可以通过实例直接调用组件的方法或访问数据
Refs
实例对象上的一个属性,用来保存被ref标记了的组件/DOM元素
5-eventBus
概念
eventBus 又称为事件 总线,在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件, 所以组件都可以通知其他组件。
eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难
在Vue的项目中怎么使用eventBus来实现组件之间的数据通信呢?具体通过下面几个步骤
初始化
首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它.
发送事件
假设你有两个组件: additionNum 和 showNum, 这两个组件可以是兄弟组件也可以是父子组件;这里我们以兄弟组件为例:
接收事件
移除事件监听者
如果想移除事件的监听, 可以像下面这样操作:
6-Vuex
https://www.bilibili.com/read/cv2898813/
7-localStorage / SessionStorage
这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。
通过window.localStorage.getItem(key)获取数据
通过window.localStorage.setItem(key,value)存储数据
注意用JSON.parse() / JSON.stringify() 做数据格式转换
localStorage / sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题.
8-$attrs / $listeners
概念
在vue2.4中,为了解决该需求,引入了 a t t r s 和 attrs 和 attrs和listeners , 新增了inheritAttrs 选项。 在版本2.4以前,默认情况下父作用域的不被认作props的属性百年孤独,将会“回退”且作为普通的HTML特性应用在子组件的根元素上。接下来看一个跨级通信的例子:
如果child-com1中的属性做为props:[‘name’]来接受
那么this.$attrs对象中将不再拿到name属性