-
Vue组件之间传值
聊一聊vue里面组件之间的传值
首先总结一下vue里面传值的几种关系：
如上图所示, A与B、A与C、B与D、C与F组件之间是父子关系； B与C之间是兄弟关系；A与D、A与E之间是隔代关系； D与F是堂兄关系，针对以上关系 我们把组件之间传值归类为：
1.父子组件之间的通讯
2.非父子组件之间的通讯（兄弟组件 隔代关系组件）vue里面组件通许的方式：
- props/$emit
- $children / $parent
- ref / refs
- provide / reject
- eventBus
- $attrs / $linteners
- vuex
- localStorage / sessionStorage
1.父组件向子组件传值
{{ item }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
2.子组件向父组件传值
// prop 只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且 prop 只读，不可被修改，所有修改都会失效并警告。{{ currentIndex }}
{{ item }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
二. $children / $parent 直接简单点写法：
this.$parent this.$children- 1
- 2
这种方式是直接通过children 或者parent获取组件上的所有对象实例，并且他还是一个数组，我们一般要获取需要这么写
this.$children[0].age，通过索引获取到自己想要的子组件，当子组件比较多的时候，如果后期某个子组件删除了或者新增，对应的索引有可能会发生变化，既不利于维护，所以在实际开发中用的比较少。
同样的this. $parent获取父组件的所有实例对象，当涉及到公共子组件的时候，定义的名称可能耦合性比较高，如果以这种方式去修改父组件的状态，很容易出问题，甚至调试都很不方便，所以也一般用的比较少。3. ref / refs
ref：如果在普通的 DOM 元素上使用，引用指向的就是DOM 元素，可以操作dom元素的方法，如果用在子组件上，引用就指向组件实例，可以通过实例直接调用子组件的方法或数据{{name}}1234 xx - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
4.provide / reject
5.eventBus
eventBus可以作为全局组件通信（任意的两个组件，没有任何关联的组件），可以直接进行交流的通讯方案，eventBus通常用来做全局范围内通信的一个常用方案，非常灵活 使用简单而且很轻
在vue2里面的使用：import Vue from 'vue' // main.js 中 // 第一种定义方式 Vue.prototype.$eventBus = new Vue() // 第二种定义方式 window.eventBus = new Vue(); **触发事件：** // params 多个参数 this.$eventBus.$emit('eventName', param1,param2,...) //使用方式二定义时 eventBus.$emit('eventName', param1,param2,...) **监听事件** //使用方式一定义时 this.$eventBus.$on('eventName', (param1,param2,...)=>{ //需要执行 逻辑代码 // params 多个参数 }) //使用方式二定义时 eventBus.$on('eventName', (param1,param2,...)=>{ //需要执行 逻辑代码 }) **移除事件，在开发过程中，当离开当前页面时要取消坚挺，避免事件被反复出发，和造成内存泄漏** //使用方式一定义时 this.$eventBus.$off('eventName'); //使用方式二定义时 eventBus.$off('eventName');- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
EventBus的原理是什么？ 直接上代码
class MyEventBus { constructor() { // 存储所有事件对应的回调的对应关系 /** * key : [ callback, callback ] */ this.items = {}; } // 监听 $on(eventName, callback) { if (!this.items[eventName]) { //一个事件可能有多个监听者 this.items[eventName] = []; } this.items[eventName].push(callback) // 简化版写法 等同于上面 // (this.items[eventName] ||= []).push(callback) } // 触发监听 $emit(eventName, ...args) { if (!this.items[eventName]) return; this.items[eventName].forEach(ca => ca(...args)) } // 去掉监听 $off(eventName) { this.items[eventName] = [] } } export default new MyEventBus();- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
Vue3种移除了$on $off等自带自定义事件的相关方法，因此在vue3中使用mitt来代替eventBus
//在utils目录下，新建 mitt.js 文件，写入下面代码进行封装 import mitt from 'mitt' const emitter =new mitt() export default emitter // 在使用中直接引入 import emitter from '../api/mitt' emitter.on('foo', e => console.log(e) ) //emitter emitter.emit('foo', 'emitter') // 用法 引入封装好的mitt即可直接使用mitt，但需要注意：注册事件最好在钩子onMounted中进行，并且注册的事件需要在onUnmounted钩子中移除。如果不移除同样有可能会造成反复调用，和内存泄漏等问题 // 引入 mitt import emitter from '../api/mitt' // 注册 emitter.on('eventName', function(e) { console.log(e) }) // 调用 emitter.emit('eventName', 'emitter') // 移除 emitter.off('eventName')- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
5. $attrs / $linteners
$attrs：用于多层次组件传递参数（组件标签的attribute，class和style除外），爷爷辈组件向孙子辈组件传递参数（注：参数不能被父辈prop识别，一旦被父辈prop识别且获取，则孙子辈组件不能获取到该参数） 并且 v-bind不能被简写
$listeners：用于多层次组件传递事件监听器，爷爷辈组件向父辈、孙子辈、曾孙子辈……组件传递事件（与 $attrs 不同，不存在半路被拦截的情况）v-on 不能用简写 @，虽然不报错，但是也不生效
GrandFather:GrandSonGrandSon 1234- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
关于Vue的inheritAttrs的理解：
vue官网对于inheritAttrs的属性解释：默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。
如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。直接看效果： 当设置为true，默认是为true的
当设置为false时后：这也算的上是一点点小优化策略吧
7.localStorage / sessionStorage
这个我们用的应该是比较多的，我们在vue里面用的比较多的Vul-lsimport Vue from 'vue' import Storage from 'vue-ls' // vue-ls 的配置 const storageOptions = { namespace: 'vue_', // key 键的前缀（随便起） name: 'ls', // 变量名称（随便起） 使用方式：Vue.变量名称 或 this.$变量名称 storage: 'local' // 作用范围：local、session、memory } Vue.use(Storage, storageOptions) 就不做具体的操作了- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
浏览器缓存里面有个可以监听缓存变化的方法：废话不多说 上代码
export const resetSetItem = (key: string, newVal: string) => { if (key === 'reportcenterList') { // 创建一个StorageEvent事件 const newStorageEvent = document.createEvent('StorageEvent') const storage = { setItem: function (k, val) { sessionStorage.setItem(k, val) // 初始化创建的事件 newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null) // 派发对象 window.dispatchEvent(newStorageEvent) } } return storage.setItem(key, newVal) } } // 调用 resetSetItem('reportcenterList', JSON.stringify(val)) console.log('监听到数据变化') const reportcenterList = sessionStorage.getItem('reportcenterList') || ''- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
-
相关阅读:
【LeetCode】剑指 Offer Ⅱ 第7章：队列（6道题） -- Java Version
2023年全球及中国运动休闲服饰发展趋势分析：互联网经营将成为行业趋势[图]
windows系统edge浏览器退出账户后还能免密登录的解决方式
【无标题】
4.3.4-Testing_for_Account_Enumeration_and_Guessable_User_Account
Mac M1安装配置与卸载GoLang---kalrry
C++ Qt开发：QSqlDatabase数据库组件
我爱上了这个网站！
驱动开发11-2 编写SPI驱动程序-点亮数码管
CSDN竞赛第六期第二题（C++）
- 原文地址：https://blog.csdn.net/qq_24418107/article/details/132693226
