Hello_MrShu-CSDN博客

原创 position:absolute绝对定位与border-box父元素内边框关系

absolute定位相对于已定位父级内边框，不管父级的 box-sizing 是 border-box 还是 content-box。虽然子级 position:absolute 脱离了正常的文档流，但是因为父级是 position:relative，所以子级和父级之间的关系还在。而父级盒模型的特点，使子级在定位的时候是以边框内为标准的。至于父级是不是border-box，那与子级定位无关，因为那是父级在整个文档布局时的宽高属性。

2022-10-20 19:14:49 830 1

原创 vue组件通信方式之eventBus

父子通信，通常父组件向子组件通过props传值，子组件通过使用$emit向父组件传参，还有诸如 $parent ,$children, $refs 等直接获取组件的方法。兄弟组件，或者没有直接联系的组件之间进行通信时就会比较麻烦，比较常用的就是vuex等状态管理工具。此时，我们还有一个简单的方法那就是vue事件总线（eventBus）绑定前不解绑的话，主要有两方面的问题：1、事件反复触发；2、内存泄漏；$on;$off ;内存泄漏（闭包）

2022-10-17 18:18:34 3076

原创 vue过滤器filter的使用

vue允许自定义过滤器，我们通常用于对文本进行格式化一类的操作。vue项目中创建全局过滤器：在main.js中注册全局过滤器，且必须放在vue实例创建之前。然后才可以在各个组件中使用。局部过滤器;多个过滤器串联;过滤器添加参数;过滤器 this 指向问题;

2022-10-17 16:50:20 7547 1

原创 vue2.0对象添加新的属性方法$set、object.assign()

我们都知道，vue2.0的双向数据绑定是利⽤Object.defineProperty()来劫持各个属性的setter和getter，在数据变化时，发布消息给订阅者，从而触发相应的监听回调。vue.$set()，它可以手动的把 obj.age 处理成响应式属性，这样，视图就可以更新了。Object.assign(target, obj1, obj2) 合并对象数组中如果使用 index 来修改某一项，如 this.arr[3] = 'lisi' 这同样不是响应式的；也可以使用 set方法

2022-10-14 15:38:27 3581

原创 element UI组件添加自定义参数

该组件change事件回调参数有两个：currentValue 和 oldValue；我们在使用elmentUI组件时，使用额外的方法，来给组件添加自定义参数。

2022-10-13 17:26:38 1818

原创 v-if 切换 el-tabs 加载 ECharts 错误问题（二）

vue项目在使用elementUI的el-tabs组件时，通过v-if切换两个tabs，当tabsA和tabsB中有相同name的tab时会报错：Duplicate keys detected: 'tab-xxx'. This may cause an update error.

2022-09-29 18:35:04 1060

原创 v-if 切换 el-tabs 加载 ECharts 错误问题（一）

在vue项目中使用了 echarts 和 elementUI 的 el-tabs 组件；在同一个页面点击按钮，通过v-if切换加载两个不同的 tabs（tabsA和tabsB）；当从tabsA切换到tabsB时，div的大小变化了，但是div里面的Echarts图，数据变化了，图表的大小却还是切换之前的大小。审查元素发现，dom元素貌似没有销毁，这与之前发现的 v-if 切换相同元素，造成的局部编译有关。在同一个dom中画多个实例时，需要销毁前一个，再画后一个。

2022-09-29 18:14:34 913

原创 vue scoped和scoped穿透

vue文件中的style标签上会有一个特殊属性scoped。当一个style标签拥有scoped属性时，他的css样式只能作用于当前的vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加了scoped属性，相当于完成了样式的模块化。

2022-09-29 18:02:43 391

原创 vue.nextTick的作用

我们在项目中有时会遇到需要获取dom的情况，比如echarts。在下次DOM更新循环结束之后执行延迟回调，这就是nextTick，控制台console结果js和jq的不一致

2022-09-29 17:37:32 265

原创 v-if 和 v-show 的区别以及 v-if 局部编译/卸载问题

区别：v-ifv-show手段是通过控制dom节点的存在与否来控制元素的显隐；是通过设置DOM元素的display样式，block为显示，none为隐藏；编译过程切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；只是简单的基于css切换；编译条件是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存后，然后再切换的时候进行局部卸载);是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

2022-09-29 16:37:18 560

Hello_MrShu的博客