Vue重要知识
Event Bus 总线
Vue中的EventBus是一种发布订阅模式的实践,适用于跨组件简单通信。
Vuex也可以用来组件中进行通信,更适用于多组件高频率通信。
使用方式:
1.把Bus注入到Vue根对象中,在子组件中可以通过this.$root.Bus.$on(),this.$rooot.Bus.$emit()来调用
import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
el:'#app',
data:{
Bus
}
})
2.挂载EventBus到vue.prototype
// bus.js
import Bus from 'vue';
let install = function (Vue) {
... ...
// 设置eventBus
Vue.prototype.bus = new Bus();
... ...
}
export default {install};
// main.js
import Vue from 'vue';
import bus from './bus';
... ...
Vue.use(bus);
... ...
注意事项
事件订阅($on)必须在事件广播($emit)前注册;
取消事件订阅($off)必须跟事件订阅($on)成对出现。
注册的总线事件要在组件销毁时卸载,否则会多次挂载,造成触发一次但多个响应的情况
参考资料:https://www.cnblogs.com/fanlinqiang/p/7756566.html
mxin混入
mixin就是采用一定规则将一个功能(组件)的属性混合到另一个组件或者全局当中,优点就是灵活度高,耦合度低,便于维护和复用。
选项合并(混入和组件数据有冲突的时候,都以组件数据优先)
1.当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。比如,数据对象在内部会进行递归 合并,并在发生冲突时以组件数据优先。
2.同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
3.值为对象的选项,例如 methods
、components
和 directives
,将被合并为同一个对象。两个对象键名冲突 时,取组件对象的键值对。
注意:Vue.extend()
也使用同样的策略进行合并。
全局混入
全局混入会被注册到每个单一组件上,它会影响每个单独创建的 Vue 实例 。
所以,在Vue官网也有如下提示:请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组 件)。大多数情况下,只应当应用于自定义选项,就像上面示例一样。推荐将其作为插件发布,以避免重复应用 混入。
prototype原型
在Vue中,可以通过把方法添加到 Vue.prototype
上,来实现添加 Vue 实例方法。添加完成以后,就可以在实例对象中直接通过this.$方法名()的方式调用。
而其中的原理就是利用JS函数的构造函数的特性,在Vue原型上添加属性/方法,在Vue实例上就可以进行读取/调用。
extends继承
允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用 Vue.extend
。这主要是为了便于扩展单文件组件。
extend是产生一个继承自Vue类的子类,只会影响这个子类的实例对象,不会对Vue类本身以及Vue类的实例对象产生影响。
var CompA = { ... }
方法1
var CompB = {
extends: CompA,
...
}
方法2
const ChildrenVue = Vue.extend(CompA,)
依赖注入
provide
选项允许我们指定我们想要提供给后代组件的数据/方法。
inject
选项来接收指定的我们想要添加在这个实例上的属性
// 在一个组件上设置注入的属性,可以是对象,也可以是函数返回一个对象
provide: {
parentProvide: {
msg: 'hello world'
}
},
// 在其任意层级的子节点可以获取到父节点注入的属性
inject: [
'parentProvide'
]
依赖注入的属性是无法修改的,如果需要在后代组件中监听注入的属性变化,需要在祖先组件中的注入属性为this
, 即把祖先属性作为注入属性往下传递。
// 注意这里注入时使用的是函数返回的对象
provide () {
return {
parentProvide: this
}
},
// 接收注入的属性并可以直接修改,修改后祖先的这个属性值也会变化(不推荐在Vue后代组件中修改祖先的属性,因为这样会导致其他后代中的属性值改变)
inject: [
'parentProvide'
],
methods: {
updataParentMsg () {
this.parentProvide.msg = '重置了'
}
},
依赖注入很好的解决了在跨层级组件直接的通信问题,在封装高级组件的时候会很常用。
Vue重要知识的更多相关文章
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础知识之vue-resource和axios
Vue基础知识之vue-resource和axios 原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...
- vue路由知识整理
vue路由知识整理 对于单页应用,官方提供了vue-router进行路由跳转的处理.我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(compo ...
- Vue大概知识体系和学习参考
Vue大概知识体系和学习参考文档 官方文档学习,参考,借鉴地址:https://cn.vuejs.org/v2/guide/installation.html 菜鸟教程:https://www.run ...
- 【Vue高级知识】细谈Vue 中三要素(响应式+模板+render函数)
[Vue高级知识]细谈Vue 中三要素(响应式+模板+render函数):https://blog.csdn.net/m0_37981569/article/details/93304809
- vue初级知识总结
从我第一篇博客的搭建环境开始,就开始学习vue了,一直想将这些基本知识点整理出来,但是一直不知如何下手,今天刚好实战了两个小demo,所以就想趁这机会将以前的一起整理出来,这是vue最基础的知识,我有 ...
- Vue基础知识简介
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
- vue - 准备知识
一.知识 http://www.cnblogs.com/majj/https://www.cnblogs.com/majj/category/1216624.html 阮一峰 es6http://es ...
- vue相关知识
1.看https://www.bilibili.com/video/av27969216/?p=54,看他的就够了 https://juejin.im/post/5a5bc8c36fb9a01ca26 ...
- Vue部分知识
一.本尊建议的学习顺序:https://zhuanlan.zhihu.com/p/23134551(侵删) 二.安装: 1.安装 Node.js,可以去Node.js的官网上下载: 2.(非必选)如果 ...
随机推荐
- fabric运行错误汇总
Error generating signCA for org org1.example.com: Failed storing key [ECDSAP256]: Failed storing ECD ...
- 【Docker】Asp.net core在docker容器中的端口问题
还记得[One by one系列]一步步学习docker(三)--实战部署dotnetcore中遇到的问题么?容器内部启动始终是80端口,并不由命令左右. docker run --name cont ...
- flask 中的endpoint有什么用?
url到view function之间的一个中间概念,默认是view function的名字,相比于直接使用view function, 使用end point 提供了一个命名空间,可以让不同蓝图的v ...
- ICCV2021 | Vision Transformer中相对位置编码的反思与改进
前言 在计算机视觉中,相对位置编码的有效性还没有得到很好的研究,甚至仍然存在争议,本文分析了相对位置编码中的几个关键因素,提出了一种新的针对2D图像的相对位置编码方法,称为图像RPE(IRPE). ...
- 「3dmax」快速配置3DMax
3DMax学习 1.0.认识3dmax 3dmax(3D Studio Max),版权Autodesk公司持有.是基于PC系统的三维动画渲染和制作软件,主要用于模型构建和骨骼动画制作.行业使用分布广泛 ...
- .NET 百万级 大数据插入、更新 ,支持多种数据库
功能介绍 (需要版本5.0.44) 大数据操作ORM性能瓶颈在实体转换上面,并且不能使用常规的Sql去实现 当列越多转换越慢,SqlSugar将转换性能做到极致,并且采用数据库最佳API 操作数据库 ...
- freeswitch verto communicator客户端
概述 我们在web客户端使用sip协议时用的比较多的是sipml5库和jssip库. 但是sip协议比较重,又复杂,所以freeswitch内部就自定义了一个verto协议,方便在web页面上使用音视 ...
- gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
前言 Excel功能强大,应用广泛.随着web应用的兴起和完善,用户的要求也越来越高.很多Excel的功能都搬到了sass里面.恨不得给他们做个Excel出来...程序员太难了... 去年我遇到了 ...
- springbootjpa的dao层也会出现找不到javabean的操作
使用jpa的过程中,有一次使用dao写了一个 SysCompany findByName(String name);但实体类中没有name这个属性就会报错.bean注入异常
- mybatis-参数如何测试
mybatis参数非常多测试的时候定位bug一直是个问题,如果老用大部分时间来定位一个错误的参数,太浪费时间了...