================================================================================
$attrs:
用来接收父作用域中不作为 prop 被识别的 attribute 属性,并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。
当你创建了一个组件,你要接收 param1 、param2、param3 …… 等数十个参数,如果通过 props,那你需要通过props: [‘param1’, ‘param2’, ‘param3’, ……]等声明一大堆。如果这些 props 还有一些需要往更深层次的子组件传递,那将会更加麻烦。
而使用 $attrs ,你不需要任何声明,直接通过 $attrs.param1、 $attrs.param2……就可以使用,而且向深层子组件传递上面也给了示例,十分方便。
$listeners:
包含了父作用域中的 v-on 事件监听器。它可以通过 v-on=“$listeners” 传入内部组件——在创建更高层次的组件时非常有用,这里在传递时的使用方法和 $attrs 十分类似。
实例
在实例中,共有三个组件:A、B、C,其关系为:[ A [ B [C] ] ],A为B的父组件,B为C的父组件。即:1级组件A,2级组件B,3级组件C。我们实现了:
-
父向子传值:1级组件A通过:messageFromA="message"将 message 属性传递给2级组件B,2级组件B通过 $attrs.messageFromA获取到1级组件A的 message 。
-
跨级向下传值:1级组件A通过:messageFromA=“message"将 message 属性传递给2级组件B,2级组件B再通过v-bind=”$attrs"将其传递给3级组件C,3级组件C通过 $attrs.messageFromA获取到1级组件A的 message 。
-
子向父传值:1级组件A通过@keyup=“receive"在子孙组件上绑定keyup事件的监听,2级组件B在通过v-on=”$listeners"来将 keyup 事件绑定在其 input 标签上。当2级组件B input 输入框输入时,便会触发1级组件A的receive回调,将2级组件B的 input 输入框中的值赋值给1级组件A的 messageFromComp ,从而实现子向父传值。
-
跨级向上传值:1级组件A通过@keyup=“receive"在子孙组件上绑定keyup事件的监听,2级组件B在通过
<CompC v-on="$listeners" />
将其继续传递给C。3级组件C在通过v-on=”$listeners"来将 keyup 事件绑定在其 input 标签上。当3级组件C input 输入框输入时,便会触发1级组件A的receive回调,将3级组件C的 input 输入框中的值赋值给1级组件A的 messageFromComp ,从而实现跨级向上传值。
// 3级组件C
this is C component
收到来自A组件的消息:{{ $attrs.messageFromA }}
// 2级组件B
this is B component
收到来自A组件的消息:{{ $attrs.messageFromA }}
// A组件
this is A component
收到来自{{ comp }}的消息:{{ messageFromComp }}
<CompB :messageFromA=“message” @keyup=“receive” />
============================================================================
provide/inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。如果你是熟悉React的同学,你一定会立刻想到Context这个api,二者是十分相似的。
provide: 是一个对象,或者是一个返回对象的函数。该对象包含可注入其子孙的 property ,即要传递给子孙的属性和属性值。
injcet: 一个字符串数组,或者是一个对象。当其为字符串数组时,使用方式和props十分相似,只不过接收的属性由data变成了provide中的属性。当其为对象时,也和props类似,可以通过配置default和from等属性来设置默认值,在子组件中使用新的命名属性等。
实例
这个实例中有三个组件,1级组件A,2级组件B,3级组件C:[ A [ B [C] ] ],A是B的父组件,B是C的父组件。实例中实现了:
-
父向子传值:1级组件A通过provide将message注入给子孙组件,2级组件B通过inject: [‘messageFromA’]来接收1级组件A中的message,并通过messageFromA.content获取1级组件A中message的content属性值。
-
跨级向下传值:1级组件A通过provide将message注入给子孙组件,3级组件C通过inject: [‘messageFromA’]来接收1级组件A中的message,并通过messageFromA.content获取1级组件A中message的content属性值,实现跨级向下传值。
// 1级组件A
this is A component
// 2级组件B
this is B component
收到来自A组件的消息:{{ messageFromA && messageFromA.content }}
// 3级组件C
this is C component
收到来自A组件的消息:{{ messageFromA && messageFromA.content }}
注意点:
- 可能有同学想问我上面1级组件A中的message为什么要用object类型而不是string类型,因为在vue provide 和 inject 绑定并不是可响应的。如果message是string类型,在1级组件A中通过input输入框改变message值后无法再赋值给messageFromA,如果是object类型,当对象属性值改变后,messageFromA里面的属性值还是可以随之改变的,子孙组件inject接收到的对象属性值也可以相应变化。
- 子孙provide和祖先同样的属性,会在后代中覆盖祖先的provide值。例如2级组件B中也通过provide向3级组件C中注入一个messageFromA的值,则3级组件C中的messageFromA会优先接收2级组件B注入的值而不是1级组件A。
![在这里插入图片描述](https://img-blog.csdnimg.cn/543aac6d138a4fe1ac8f49f156ea2cc7.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Y2K55Sf6L-H5b6A,size_16,color_FFFFFF,t_70,g_se,x_16)
======================================================================
eventBus又称事件总线,通过注册一个新的Vue实例,通过调用这个实例的 e m i t 和 emit和 emit和on等来监听和触发这个实例的事件,通过传入参数从而实现组件的全局通信。它是一个不具备 DOM 的组件,有的仅仅只是它实例方法而已,因此非常的轻便。
我们可以通过在全局Vue实例上注册:
// main.js
Vue.prototype.$Bus = new Vue()
但是当项目过大时,我们最好将事件总线抽象为单个文件,将其导入到需要使用的每个组件文件中。这样,它不会污染全局命名空间:
// bus.js,使用时通过import引入
import Vue from ‘vue’
export const Bus = new Vue()
原理分析
eventBus的原理其实比较简单,就是使用订阅-发布模式,实现 e m i t 和 emit和 emit和on两个方法即可:
// eventBus原理
export default class Bus {
constructor() {
this.callbacks = {}
}
$on(event, fn) {
this.callbacks[event] = this.callbacks[event] || []
this.callbacks[event].push(fn)
}
$emit(event, args) {
this.callbacks[event].forEach((fn) => {
fn(args)
})
}
}
// 在main.js中引入以下
// Vue.prototype.$bus = new Bus()
实例
在这个实例中,共包含了4个组件:[ A [ B [ C、D ] ] ],1级组件A,2级组件B,3级组件C和3级组件D。我们通过使用eventBus实现了:
- 全局通信:即包括了父子组件相互通信、兄弟组件相互通信、跨级组件相互通信。4个组件的操作逻辑相同,都是在input输入框时,通过
this.$bus.$emit('sendMessage', obj)
触发sendMessage事件回调,将sender和message封装成对象作为参数传入;同时通过this.$bus.$on('sendMessage', obj)
监听其他组件的sendMessage事件,实例当前组件示例sender和message的值。这样任一组件input输入框值改变时,其他组件都能接收到相应的信息,实现全局通信。
// main.js
Vue.prototype.$bus = new Vue()
// 1级组件A
this is CompA
<input type=“text” v-model=“message” @keyup=“sendMessage” />
收到{{ sender }}的消息:{{ messageFromBus }}
// 2级组件B
this is CompB
<input type=“text” v-model=“message” @keyup=“sendMessage” />
收到{{ sender }}的消息:{{ messageFromBus }}
// 3级组件C
this is CompC
<input type=“text” v-model=“message” @keyup=“sendMessage” />
收到{{ sender }}的消息:{{ messageFromBus }}
// 3级组件D
this is CompD
<input type=“text” v-model=“message” @keyup=“sendMessage” />
收到{{ sender }}的消息:{{ messageFromBus }}
==================================================================
当项目庞大以后,在多人维护同一个项目时,如果使用事件总线进行全局通信,容易让全局的变量的变化难以预测。于是有了Vuex的诞生。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
实例
Vuex的实例和事件总线leisi,同样是包含了4个组件:[ A [ B [ C、D ] ] ],1级组件A,2级组件B,3级组件C和3级组件D。我们在这个实例中实现了:
- 全局通信:代码的内容和eventBus也类似,不过要比eventBus使用方便很多。每个组件通过watch监听input输入框的变化,把input的值通过vuex的commit触发mutations,从而改变stroe的值。然后每个组件都通过computed动态获取store中的数据,从而实现全局通信。
// store.js
import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
export default new Vuex.Store({
state: {
message: {
sender: ‘’,
content: ‘’,
},
},
mutations: {
sendMessage(state, obj) {
state.message = {
sender: obj.sender,
content: obj.content,
}
},
},
})
// 组件A
this is CompA
收到{{ sender }}的消息:{{ messageFromStore }}
# 最后自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
ender: obj.sender,
content: obj.content,
}
},
},
})
// 组件A
this is CompA
收到{{ sender }}的消息:{{ messageFromStore }}
# 最后自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-P8P0T23V-1715656363228)]
[外链图片转存中…(img-QXD0Lf20-1715656363229)]
[外链图片转存中…(img-XQFAJc4x-1715656363229)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!