You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// 父组件中
<template><divclass="hello_world"><div>{{msg}}</div><com-a></com-a><button@click="changeA">点击改变子组件值</button></div></template><script>importComAfrom'./test/comA.vue'exportdefault{name: 'HelloWorld',components: { ComA },data(){return{msg: 'Welcome'}},methods: {changeA(){// 获取到子组件Athis.$children[0].messageA='this is new value'}}}</script>
// 子组件中
<template><divclass="com_a"><span>{{messageA}}</span><p>获取父组件的值为: {{parentVal}}</p></div></template><script>exportdefault{data(){return{messageA: 'this is old'}},computed:{parentVal(){returnthis.$parent.msg;}}}</script>
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?
![image](https://camo.githubusercontent.com/ac97539772fd8a27369ac4d483506ccefe42897f413863a4836c05507204e93a/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031392f372f31312f313662646535623631336161633465653f773d34363226683d34303226663d706e6726733d3538343432)
首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系。
vue组件中关系说明:
如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系; B与C之间是兄弟关系;A与D、A与E之间是隔代关系; D与E是堂兄关系(非直系亲属)
针对以上关系我们归类为:
本文会介绍组件间通信的8种方式如下图目录所示:并介绍在不同的场景下如何选择有效方式实现的组件间通信方式,希望可以帮助小伙伴们更好理解组件间的通信。
![](https://camo.githubusercontent.com/4b3f31f1a9d0ac47bac0ac19de0ec1ddfe7fcb6a23da874da1d79f6e66813c10/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031392f372f31312f313662646535623631333830326436623f773d34393926683d35363626663d706e6726733d313333363638)
一、
props
/$emit
父组件通过
props
的方式向子组件传递数据,而通过$emit
子组件可以向父组件通信。1. 父组件向子组件传值
下面通过一个例子说明父组件如何向子组件传递数据:在子组件
article.vue
中如何获取父组件section.vue
中的数据articles:['红楼梦', '西游记','三国演义']
2. 子组件向父组件传值
对于
$emit
我自己的理解是这样的:$emit
绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。 通过一个例子,说明子组件如何向父组件传递数据。在上个例子的基础上, 点击页面渲染出来的
ariticle
的item
, 父组件中显示在数组中的下标二、
$children
/$parent
上面这张图片是
vue
官方的解释,通过$parent
和$children
就可以访问组件的实例,拿到实例代表什么?代表可以访问此组件的所有方法和data
。接下来就是怎么实现拿到指定组件的实例。使用方法
总结
上面两种方式用于父子组件之间的通信, 而使用props进行父子组件通信更加普遍; 二者皆不能用于非父子组件之间的通信。
三、
provide
/inject
概念:
provide
/inject
是vue2.2.0
新增的api, 简单来说就是父组件中通过provide
来提供变量, 然后再子组件中通过inject
来注入变量。举例验证
接下来就用一个例子来验证上面的描述:
假设有三个组件: A.vue、B.vue、C.vue 其中 C是B的子组件,B是A的子组件
四、
ref
/refs
ref
:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例,可以通过实例直接调用组件的方法或访问数据, 我们看一个ref
来访问组件的例子:五、eventBus
eventBus
又称为事件总线,在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件, 所以组件都可以通知其他组件。在Vue的项目中怎么使用
eventBus
来实现组件之间的数据通信呢?具体通过下面几个步骤1. 初始化
首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它.
2. 发送事件
假设你有两个组件:
additionNum
和showNum
, 这两个组件可以是兄弟组件也可以是父子组件;这里我们以兄弟组件为例:3. 接收事件
这样就实现了在组件
addtionNum.vue
中点击相加按钮, 在showNum.vue
中利用传递来的num
展示求和的结果.4. 移除事件监听者
如果想移除事件的监听, 可以像下面这样操作:
六、Vuex
1. Vuex介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.
Vuex 解决了
多个视图依赖于同一状态
和来自不同视图的行为需要变更同一状态
的问题,将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上2. Vuex各个模块
state
:用于数据的存储,是store中的唯一数据源getters
:如vue中的计算属性一样,基于state数据的二次包装,常用于数据的筛选和多个数据的相关性计算mutations
:类似函数,改变state数据的唯一途径,且不能用于处理异步事件actions
:类似于mutation
,用于提交mutation
来改变状态,而不直接变更状态,可以包含任意异步操作modules
:类似于命名空间,用于项目中将各个模块的状态分开定义和操作,便于维护3. Vuex实例应用
vuex的
store,js
七、
localStorage
/sessionStorage
这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。
通过
window.localStorage.getItem(key)
获取数据通过
window.localStorage.setItem(key,value)
存储数据八
$attrs
与$listeners
现在我们来讨论一种情况, 我们一开始给出的组件关系图中A组件与D组件是隔代关系, 那它们之前进行通信有哪些方式呢?
props
绑定来进行一级一级的信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一级级往上传递eventBus
,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低, 可读性也低在
vue2.4
中,为了解决该需求,引入了$attrs
和$listeners
, 新增了inheritAttrs
选项。 在版本2.4以前,默认情况下父作用域的不被认作props
的属性百年孤独,将会“回退”且作为普通的HTML特性应用在子组件的根元素上。接下来看一个跨级通信的例子:总结
常见使用场景可以分为三类:
props
;$parent
/$children
;provide
/inject
;ref
;$attrs
/$listeners
eventBus
; vuexeventBus
;Vuex;provide
/inject
、$attrs
/$listeners
今天就分享这么多,如果对分享的内容感兴趣,可以关注公众号「程序员成长指北」,或者加入技术交流群,大家一起讨论。
加入我们一起学习吧!
The text was updated successfully, but these errors were encountered: