扫码关注公众号

前端vue.js之组件间通信方式
05-08
149观看
01

采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好应该怎么做呢?

在控制路由的组件中写一个函数(使用v-if控制router-view的显示隐藏,这里的原理不作赘述),然后把这个函数传递给后代,然后在后代组件中调用这个方法即可刷新路由。

来自:vue.js-组件间通信方式
02

vue2有多少种组件间通信方式,分别是什么?

首先我们需要知道在vue中组件之间存在什么样的关系,才更容易理解他们的通信方式。一般我们分为如下关系:父子组件之间通信非父子组件之间通信(兄弟组件、隔代关系组件等)1.props/$emit父组件通过props的方式向子组件传递数据,而通过$emit子组件可以向父组件通信。2.v-model指令v-model是用来在表单控件或者组件上创建双向绑定的,他的本质是v-bind和v-on的语法糖,在一个组件上使用v-model,默认会为组件绑定名为value的prop和名为input的事件。3..sync修饰符.sync修饰符在vue1.x的版本中就已经提供,1.x版本中,当子组件改变了一个带有.sync的prop的值时,会将这个值同步到父组件中的值。这样使用起来十分方便,但问题也十分明显,这样破坏了单向数据流,当应用复杂时,debug的成本会非常高。于是乎,在vue2.0中移除了.sync。但是在实际的应用中,.sync是有它的应用场景的,所以在vue2.3版本中,又迎来了全新的.sync。新的.sync修饰符所实现的已经不再是真正的双向绑定,它的本质和v-model类似,只是一种缩写。4.parent/parent/parent/children通过$parent和$children就可以访问组件的实例,拿到实例代表什么?代表可以访问此组件的所有方法和data。5.provide/injectprovide/inject是vue2.2.0新增的api,简单来说就是父组件中通过provide来提供变量,然后再子组件中通过inject来注入变量。官方描述:这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。6.ref/$refsref:如果在普通的DOM元素上使用,引用指向的就是DOM元素;如果用在子组件上,引用就指向组件实例,可以通过实例直接调用组件的方法或访问数据。7.eventBuseventBus呢,其实原理就是事件订阅发布,eventBus又称为事件总线,在vue中可以使用它来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以通知其他组件。8.VuexVuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题,将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上。9.localStorage/sessionStorage这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。通过window.localStorage.getItem(key)获取数据通过window.localStorage.setItem(key,value)存储数据注意用JSON.parse()/JSON.stringify()做数据格式转换,localStorage/sessionStorage可以结合vuex,实现数据的持久保存,同时使用vuex解决数据和状态混乱问题。10.自己实现简单的Store模式对于小型的项目,通信十分简单,这时使用Vuex反而会显得冗余和繁琐,这种情况最好不要使用Vuex,可以自己在项目中实现简单的Store。11.通过$root访问根实例通过$root,任何组件都可以获取当前组件树的根Vue实例,通过维护根实例上的data,就可以实现组件间的数据共享。12.$attrs与$listeners$attrs:包含了父作用域中不被认为(且不预期为)props的特性绑定(class和style除外),并且可以通过v-bind="$attrs"传入内部组件。当一个组件没有声明任何props时,它包含所有父作用域的绑定(class和style除外)。$listeners:包含了父作用域中的(不含.native修饰符)v-on事件监听器。它可以通过v-on="$listeners"传入内部组件。它是一个对象,里面包含了作用在这个组件上的所有事件监听器,相当于子组件继承了父组件的事件。

来自:vue.js-组件间通信方式
03

简单介绍一下常用的组件通信大致分为几类?

常用地组件通信大致分为三类:父传子,子传父,跨组件传值父子组件的确认方法:我将B组件import引入到A组件中,那么B就是A的子组件,A就是B的父组件1.父传子props简而言之,父传子就是父组件把数据传给子组件,具体就是如下,在子组件的props中定义自定义属2.子传父$emit刚刚说到了在Vue2.0子组件不能直接改父组件的数据,否则会报错,这个解决方法就是在子组件中发起一个自定义事件,在父组件监听这个事件,并且定义一个函数来改变数据3.跨组件通信event-bus如果两个组件的关系非常的复杂或者没有未产生直接联系,那么通过父子组件通讯是非常麻烦的。这时候可以使用通用的组件通讯方案:事件总线(event-bus)

来自:vue.js-组件间通信方式
课程
专栏
【校招VIP】vue组件间通信的13种方式
csdn
【校招VIP】vue2的12种组件间通信方式,父传子,子传父,兄弟传值(超级硬核,宝藏)
csdn
【校招VIP】前端面试题 Vue 组件通信(父传子,子传父,跨组件传值)
csdn
js语言和框架-vue.js-组件间通信方式
3专栏
1课程
3 试题