实用的vue小技巧,来源于真实企业实战 —— 记得收藏~
1. 原型注入
-
全局属性和方法可以这么定义
-
方便调用和获取
-
一般不定义很多(会污染原型,每次实例Vue都会带上)
// main.js入口文件内
import Vue from “vue”;
import router from “./router”;
import store from “./store”;
import dayjs from “dayjs”;
import App from “./App”;// 将dayjs注入到Vue原型上,方便vue组件内进行this.dayjs获取
Vue.prototype.dayjs = dayjs;
// 任意组件内 this.fn() 调用即可
Vue.prototype.fn = function(){
// do something
}
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
2. 对象冻结
-
用于纯列表渲染,数据无交互的情况,可以禁止 vue 劫持绑定,节省内存,提升性能
3.img 加载失败
-
添加默认图片
<img :src=“imgUrl” @error=“handleError” alt="">
4. 递归组件
-
tree 组件常用
-
层级是根据后台数据决定的,不知道是多少级
-
当前场景需要用到动态组件
概念 -
组件在它的模板内可以递归的调用自己,只要给组件设置name组件就可
-
必须给一个条件来限制数量,否则会抛出错误: max stack size exceeded
-
组件递归用来开发一些具体有未知层级关系的独立组件(比如常见的:联级选择器和树形控件 )
子组件,当前层级值: {{index}}
5. 解决繁乱的template —— render函数
-
代码中偶尔会有这种一值多判断的问题
解救繁乱的template ———— render()
按钮1按钮2按钮3按钮4 -
这么写是没错的,但是看起来很不文雅,代码冗余
-
我们可以使用 render()函数封装一个button组件
-
只需要传值,就可以得到不同类型的按钮,非常方便
-
调用
// 1. 引入
import Button from ‘…/views/button.vue’;
// 2. 在components中注册
components:{
Button
}
// 3. 就可以在模板使用了,传入对应的值
6. 延迟更新 —— Vue.nextTick()
-
在下次 DOM 更新循环结束之后执行延迟回调
-
在修改数据之后立即使用这个方法,获取更新后的 DOM
-
一般用于,父组件调用子组件的方法时,需要等其更新完毕
//因为 mounted 阶段 dom 并未渲染完毕,所以需要KaTeX parse error: Expected '}', got 'EOF' at end of input: …ted(){ this.nextTick(() => {
// 通过 r e f s 获 取 d o m 并 绑 定 s e n d 方 法 t h i s . refs 获取dom 并绑定 send 方法 this. refs获取dom并绑定send方法this.refs.msg.send(‘浙江温州江南皮革厂’)
})
}
7. 自定义指令
-
自定义一个指令,让页面上的input框自动获取焦点
Vue.directive(‘focus’, {
inserted: function(el){
el.focus();
}
}) -
使用
1. 希望本文能对大家有所帮助,如有错误,敬请指出
2. 原创不易,还请各位客官动动发财的小手支持一波(关注、评论、点赞、收藏)
3. 拜谢各位!后续将继续奉献优质好文
4. 如果存在疑问,可以私信我