绝对干货~！学习这些Vue小技巧

学习使用$attrs和$listeners，二次封装组件就靠它了前几天，产品经理给我发了一个管理系统的设计原型。打开一看，大部分弹框的右下角都是OK和Cancel按钮。如果使用element-ui提供的Dialog，必须手动给每一个弹框添加按钮，不仅增加了代码量，而且后面需求有变化时，按钮UI也会发生变化，变化量是比较大。如果Dialog能封装两次，按钮能封装在组件内部，那就没必要重复写了。去做就对了。定义基本弹框代码但是上面的代码有个问题，不能结合Dialog本身的属性和事件对外暴露（虽然可以通过props和$emit逐一添加，但是很麻烦），这时候可以使用$attrs和$listeners来使用$attrs和$listeners$attrs:当组件被调用时，传入的属性不是在props中定义的，传入的属性会绑定到$attrs属性上（除了class和style，它们会挂载在组件的最外层元素上）并且可以被通过v-bind="$attrs"传入到内部组件中的$listeners：当组件被调用时，外部监听到的该组件的所有事件都可以通过$listeners获取。并且可以通过v-on="$listeners"传递给内部组件。修改弹框代码这是一段内容使用require.context实现前端工程自动化require.context是webpack提供的一个Api，通过执行require.context函数，主要用于实现自动引入模块。什么时候使用它？当一个js需要手动导入其他文件夹中的文件过多时可以使用。在Vue项目的开发过程中，我们可能会遇到这些可能会用到require.context的场景。当我们的路由页面比较多的时候，我们可能会把路由文件拆分成多个，然后再导入到索引中。在js路由主入口文件中使用svg符号时，需要将所有svg图片导入系统（推荐svg-sprite-loader）开发一系列基础组件，然后将所有组件导入index.js，然后放入一个数组中，遍历数组安装所有组件。对于以上场景，如果我们需要导入的文件比较少，通过import一个一个导入是可以接受的，但是对于比较大的，就变成了纯体力活，每次修改增加都需要在主条目文件。这时候我们可以通过require.context来简化这个过程。现以上面第三篇文章为例，说明require.context的用法。常用组件按照常规方式安装require.context。基本语法通过require.context安装Vue组件。自定义v模型，无论使用原生的还是封装好的UI库，表单组件一般都使用v-model。v-model虽然是语法糖，但是吃起来还是蛮甜的。学习自定义v-model还是很有必要的。基本用法组件上默认的v-model是在组件上定义一个名为value的props，同时暴露一个名为input的事件。源码：使用方法：自定义属性和事件通常情况下，使用值属性和输入事件是没有问题的，但有时某些组件会出于不同的目的使用值属性或输入事件，例如单选框和复选框等其他的值属性表单组件的类型还有其他用途，参考（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Value）。或者希望属性名或事件名更贴切实际的行为，比如active、checked等属性名。使用.sync更优雅地实现双向数据绑定。在Vue中，props属性是一种单向的数据传输。父组件的更新将流向子组件，反之则不然。但在某些情况下，我们需要对prop进行“双向绑定”。上面我们提到了使用v-model来实现双向绑定。但有时我们希望一个组件能够实现多个数据的“双向绑定”，而一个v-model组件只能有一个（Vue3.0可以有多个），这时就需要用到.sync。.sync和v-model的异同点：两者的本质都是语法糖，目的是实现组件与外部数据的双向绑定。两者都是通过属性+事件来实现的。如果有不对的地方，请在下方评论指出，谢谢）：一个组件只能定义一个v-model，但是可以定义多个。model要修改，.sync事件的名字固定为update:属性名自定义.sync在开发业务的时候，有时候需要使用遮罩层来阻止用户的行为（更多的会使用遮罩层+加载动画）,如下通过自定义.sync实现一个遮罩层动态组件，让页面渲染更灵活前两天产品经理来了新需求，告诉我页面需要根据不同的用户权限显示不同的内容，以及然后哼哼把不同权限对应的组件写出来，然后用v-if判断显示哪个组件。拿到下面的代码但是看到上面代码中一长串的v-ifs，v-else-if，感觉自己的代码整洁度要commit了，不行，代码review过不了，还可以甚至通过我自己的测试。这时候我换了个动态组件来发挥作用。Mixins，更高效的组件内容复用Mixins是Vue提供的一种混合机制，可以更高效的实现组件内容的复用。如何理解混入？我觉得和Object.assign一样，其实和Object.assign不一样。基本示例在开发echarts图表组件时，需要在窗口大小变化时重新设置图表的大小。这时候如果在每个组件中都实现一段监控代码，代码重复太多。这时候可以使用mix-in来解决这个问题//在代码中混入resize-mixins.jsimport{debounce}from'lodash'constresizeChartMethod=Symbol('resizeChart')exportdefault{data(){//里面的组件，将图表init的引用映射到图表属性return{chart:null}},created(){window.addEventListener('resize',this[resizeChartMethod])},beforeDestroy(){window.removeEventListener('reisze',this[resizeChartMethod])},methods:{//利用lodash的防抖功能控制resize频率[resizeChartMethod]:debounce(function(){if(this.chart){this.chart.resize()}},100)}}不同位置的混入规则在Vue中，一个mixin对象可以包含任何组件选项，但不同的组件选项有不同的合并策略。data为数据，混入时会进行递归合并，如果两个属性冲突，组件本身为主。比如上例中图表属性的生命周期钩子函数。对于生命周期钩子函数，混入数组时会添加同名的钩子函数，调用时依次执行。混入对象的钩子函数会先于组件的钩子函数执行。如果一个组件混合了多个对象，混合对象中同名的钩子函数会按照数组的顺序依次执行，如下代码：constmixin1={created(){console.log('Iam第一个输出')}}constmixin2={created(){console.log('我是第二个输出')}}exportdefault{mixins:[mixin1,mixin2],created(){console.log('我是第三个输出')}}Otheroptions对于值为对象的options，比如methods，components，filters，directives，props等，都会合并到同一个对象中。当两个对象的键名冲突时，取组件对象的键值对。全局mixinsMixins也可以全局注册。一旦使用全局mix-in，mix-in选项将在所有组件中生效，如下代码所示：Vue.mixin({methods:{/***通过全局mix-在**建议将埋点方法绑定到Vue的原型链，如：Vue.prototype.$track=()=>{}**/track(message){console.log(message)}}})请使用global谨慎使用mixin，因为它会影响每个单独创建的Vue实例（包括第三方组件）。在大多数情况下，它应该只应用于自定义选项