超级实用的vue小技巧，用了之后直呼好棒~_欧阳的技术

网络 02-07 674

实用的vue小技巧，来源于真实企业实战 —— 记得收藏~ 1. 原型注入2. 对象冻结3.img 加载失败4. 递归组件5. 解决繁乱的template —— render函数6. 延迟更新 —— Vue.nextTick()7. 自定义指令

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 劫持绑定，节省内存，提升性能 <script> import * as Api from "@/common/apiNew.js"; export default { data() { return { dataList: Object.freeze(this.list), }; }, methods: {}, }; </script>

3.img 加载失败添加默认图片 <img :src="imgUrl" @error="handleError" alt=""> <script> export default{ data(){ return{ imgUrl:'' } }, methods:{ handleError(e){ e.target.src = reqiure('图片路径') } } } </script> 4. 递归组件 tree 组件常用层级是根据后台数据决定的，不知道是多少级当前场景需要用到动态组件概念组件在它的模板内可以递归的调用自己，只要给组件设置name组件就可必须给一个条件来限制数量，否则会抛出错误: max stack size exceeded组件递归用来开发一些具体有未知层级关系的独立组件（比如常见的：联级选择器和树形控件） <template> <div v-for="(item,index) in treeArr"> 子组件，当前层级值： {{index}} <br/>  <tree :item="item.arr" v-if="item.flag"></tree> </div> </template> <script> export default { // 必须定义name，组件内部才能递归调用 name: 'tree', data(){ return {} }, // 接收外部传入的值 props: { item: { type:Array, default: () => [] } } } </script>

5. 解决繁乱的template —— render函数代码中偶尔会有这种一值多判断的问题 <template> <div class="hello"> <h1>解救繁乱的template ———— render()</h1>  <div v-if="value === 1"> <button>按钮1</button> </div> <div v-else-if="value === 2"> <button>按钮2</button> </div> <div v-else-if="value === 3"> <button>按钮3</button> </div> <div v-else> <button>按钮4</button> </div> </div> </template> 这么写是没错的，但是看起来很不文雅，代码冗余我们可以使用 render()函数封装一个button组件只需要传值，就可以得到不同类型的按钮，非常方便 <script> export default { props: { type: { type: String, default: 'normal' }, text: { type: String, default: 'normal' } }, render(h){ // h: createElement() return h('button', { // v-bind:class class: { btn: true, 'btn-success': this.type === 'success', 'btn-danger': this.type === 'error', 'btn-warning': this.type === 'warning', 'normal': !this.type }, // dom属性 domProps:{ innerText: this.text || '默认按钮' }, // v-on 事件可以绑定在这里 on:{ } }) } } </script> <style scoped> .btn{ width: 100px; height: 40px; color: white; transition: all .5s; } .btn:hover{ background: chartreuse; cursor: pointer; } .btn-success{ background: green; } .btn-danger{ background: red; } .btn-warning{ background: orange; } .normal{ background: blue; } </style> 调用 // 1. 引入 import Button from '../views/button.vue'; // 2. 在components中注册 components:{ Button } // 3. 就可以在模板使用了，传入对应的值 <Button :type = "type" :text = "text"> </Button> 6. 延迟更新 —— Vue.nextTick() 在下次 DOM 更新循环结束之后执行延迟回调在修改数据之后立即使用这个方法，获取更新后的 DOM一般用于，父组件调用子组件的方法时，需要等其更新完毕 //因为 mounted 阶段 dom 并未渲染完毕,所以需要$nextTick mounted(){ this.$nextTick(() => { // 通过 $refs 获取dom 并绑定 send 方法 this.$refs.msg.send('浙江温州江南皮革厂') }) } 7. 自定义指令自定义一个指令，让页面上的input框自动获取焦点 Vue.directive('focus', { inserted: function(el){ el.focus(); } }) 使用 <input placeholder="请输入你的电话" v-model="tel" v-focus />

1. 希望本文能对大家有所帮助，如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏） 3. 拜谢各位！后续将继续奉献优质好文 4. 如果存在疑问，可以私信我