vue 解决兄弟组件、跨组件深层次的通信操作
作者:夏天丫丫 发布时间:2024-05-09 15:12:55
兄弟组件之间的通信同样是在项目中经常会遇到的组件间的通信问题之一, 这种问题的最根本方法就是: 把兄弟组件内部的变量提升到一个中央仓库。
借助父级组件链式交互
使子组件1 通过 $emit 通知父级, 父级再通过响应 子组件1 的事件去触发子组件2的事件,这样的链式操作,在子组件不多的时候,但是一个不错的解决方法
子组件1
<template>
<div>
<p @click="$emit('fromFirst','来自A组件')">first组件</p>
</div>
</template>
<script>
export default {
name: 'first'
}
</script>
子组件2
<template>
子组件2
<div>{{secondInfo}}</div>
</template>
<script>
export default {
name: 'second',
data() {
return {
this.secondInfo: null
}
},
created(){
this.$on('fromFather', (info) => {
this.secondInfo = info
})
}
}
</script>
父组件
<template>
<first @fromFirst='handleFromFirst' />
<second ref='second' />
</template>
<script>
import First from './first'
import Scond from './second'
export default {
components: {First, Second},
data() {
return {
this.secondInfo: null
}
},
methods:{
handleFromFirst(val) {
let second = this.$refs.second
second.$emit('fromFather', val)
}
}
}
</script>
子组件1 触发父组件的 fromFirst 事件, 在事件中又触发了子组件2的 fromFather事件,并将从子组件1 传递过来的参数传递给了该事件, 当子组件2 执行该事件的时候,将内部的 secondInfo 改变。这就实现了一个兄弟组件的交互。
这个方式在 react 里面同样也是适用的, 但是如果父组件内包含了多个子组件并包含了复杂的逻辑, 有没有更好的方式来解决这种方式呢。
大部分第一个想到的是 vuex, 当然这在一个业务逻辑、数据复杂的项目中是一个很好的解决方法, 但是想象我们要编写一个通用组件,这个组件可能被用到不同的项目中来, 如果使用 vuex 这就要求每一个使用这个组件的项目中都要使用 vuex, 这显然是不好的。
借助中间文件,充当中央仓库
还好 ES6 的模块机制天然就支持建立一个中央仓库, 当 A 文件使用 import value from './b.js' 来引用 B 文件里面的 value 的时候, 这时就会赋值给 A 文件一个 B 文件的 value 的 只读引用, 当 B 文件里面的 value 的值发生变化的时候, A 文件里面的 value 也会跟着改变。
// lib.js
export let counter = 3;
export function incCounter() {
counter++;
}
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4
定义一个额外的实例进行一个事件的中转,对于ES6 模块的运行机制已经有了一个讲解,当模块内部发生变化的时候,引入模块的部分同样会发生变化,当又一个额外的实例对加载机制进行引入进行emit与emit与emit与on进行绑定通信,能轻而易举解决问题,通过b->a->c的模式直接过渡。
解决 vue 兄弟组件之间的通信我们同样也可以使用中央仓库的方式来实现。
// store.js 作为中央仓库
import Vue from 'vue'
export default new Vue()
通过 new 一个 vue 的实例当作兄弟组件交互的中央仓库。
父级组件
<template>
<first/>
<second/>
</template>
<script>
import First from './first'
import Scond from './second'
export default {
components: {First, Second}
}
</script>
父组件只是引入子组件, 不再作为中央仓库来过渡交互。
子组件1
<template>
<div @click='hanleClick'>子组件1</div>
</template>
<script>
import Store from './store'
export default {
name: 'first',
methods: {
handleClick() {
Store.$emit('fromFirst', '来自子组件1的传值')
}
}
}
</script>
因为我们的目的就是把 Store 作为一个中央仓库,这里我们把 fromFirst 事件添加到了 Store 上面而不是当前组件 this 上。
子组件2
<template>
子组件2
<div>{{secondInfo}}</div>
</template>
<script>
import Store from './store'
export default {
name: 'second',
data() {
return {
this.secondInfo: null
}
},
created(){
Store.$on('fromFirst', (info) => {
this.secondInfo = info
})
}
}
</script>
子组件2 里面同样也是使用 Store 实例来监听 fromFirst 事件, 因为子组件1和子组件2里面添加事件和监听事件的是同一个实例,根据我们在上文中分析的 ES6 中的情况, 当 Store 添加了 fromFirst 这个时间之后, Store实例的 $on 就可以监听到这个事件并执行回调。
跨组件深层次交互
上面讲的组件之间的关系是这样的:
我们可以实现 子组件之间的交互, 但是如果我们遇到这种情况呢?
孙组件需要跟子组件3 进行交互,还是使用上述的方法可以做到吗? 答案是肯定的,只要能够使用同一个中央仓库,那么不管什么层级的组件复杂度,都是可以实现两者的交互的。
补充知识:Vue组件跨层级通信
正常组件间通信
父->子组件 是通过属性传递
子->父组件 是通过this.$emit()传递
this.$emit()返回的是this,如果需要一些值 可使用callback方式传递
provide 和 inject
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,
不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
provide 和 inject 绑定并不是可响应的。这是刻意为之的。
然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。
provide提供数据,多层子组件 向上层寻找,只要找到 就不在向上层寻找了.
inject 向子组件注入数据
使用方式
第一种方式(传递对象,使用字符串数组接收)
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
第二种方式(传递返回对象的函数, 使用对象接收)
provide() {
return {
// 2.6.0 版本之前 通常传递this. 但这样的话 会传递很多用不到的属性
theme: {
color: 'xxx' //如果传入可响应的数据,这里的属性还是可响应的
}
};
}
inject: {
//这里可以换成其它名字
theme: {
from: "theme", // 数据来源
default: () => ({}) //降级情况下使用的 value
//可以是 普通值
//可以是 对非原始值使用一个工厂方法
}
}
//正常子组件
this.theme //即可访问
//子组件是函数式组件的使用方式
injections.theme.color
Vue.observable( object )
让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
可以作为最小化的跨组件状态存储器,用于简单的场景
提供数据可改为
provide() {
//这时提供的theme 则为可响应的数据
this.theme = Vue.observable({
color: "blue"
});
return {
theme: this.theme
};
},
来源:https://blog.csdn.net/starleejay/article/details/83660494


猜你喜欢
- 瞬间设计是什么?良好的用户体验,全在于那些完美的瞬间。在第一个瞬间,假设当一位用户从购物搜索结果页面跳转到某个店铺的时候,他此刻可能是想看看
- 一、Pythont如何打开 txt 格式的文件?1.首先我使用pycharm创建一个项目,然后在这个项目里面再创建一个python的包,然后
- 一、CSS HACK以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !impor
- PyQt中MainWindow, QWidget以及Dialog的区别和选择1. Qt界面分类在Qt Designer设计界面时,首先需要选
- 数组排序排序是指将元素按有序顺序排列。有序序列是拥有与元素相对应的顺序的任何序列,例如数字或字母、升序或降序。NumPy ndarray 对
- 1.安装插件步骤2.点击OK确认之后,提示IDE需要重启,选择重启:3.设置leetcode插件,用户名、密码:4.点击右下角的leetco
- 很多书籍里面讲的Python备份都是在linux下的,而在xp上测试一下也可以执行备份功能,代码都差不多相同,就是到执行打包的时候是不一样的
- 【实用系列】-- 胖页面载入,加载JavaScript效果整理了一下代码,做了一些优化,算是最终版了。完全不需要对其他文件做任何修改,就是所
- 在日常生活中总是有给图像分类的场景,比如垃圾分类、不同场景的图像分类等;今天的文章主要是基于图像识别场景进行模型构建。图像识别是通过 Pyt
- 学习Go语言的一些感受,不一定准确。假如发生战争,JAVA一般都是充当航母战斗群的角色。一旦出动,就是护卫舰、巡洋舰、航母舰载机、预警机、电
- 本文实例讲述了php实现的简单日志写入函数。分享给大家供大家参考。具体实现方法如下:function log( $logthis ){fil
- 前言本文写得还是比较详细,甚至有些繁琐,有很多步骤在其他的教程文档里都是省略掉的,但是我还是要写出来,因为我当时走了很多弯路,我希望你们能够
- 一、思路1、通过window的aip函数CreateFile()函数获得文件句柄2、检测在获得句柄的时候是否报错“文件被占用无法打开”3、如
- 一、Monkey测试简介Monkey测试是Android平台自动化测试的一种手段,通过Monkey程序模拟用户触摸屏幕、滑动Trackbal
- 在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则,除此之外,JavaScript和CSS也是我们页
- 一、程序的组织结构任何简单的或者复杂的算法都可以由顺序结构、选择结构和循环结构这三种基本结构组合而成二、顺序结构程序从上到下顺序地执行代码,
- 本文实例讲述了Python列表list操作符。分享给大家供大家参考,具体如下:#coding=utf8''''
- 大家都见过某网页中的恶意广告,你关闭了又出来了!为何,JS来告诉你HTML<body> <h3 class=&
- 1.过程蜘蛛纸牌大家玩过没有?之前的电脑上自带的游戏,用他来摸鱼过的举个手。但是现在的电脑上已经没有蜘蛛纸牌了。所以…
- Python 中的函数eval()?是一个非常有用的工具,在前期,我们一起学习过该函数点击查看:Python eval 函数动态地计算数学表