Vue和Element-ui的一些使用总结1.在组件上监听滚动事件时使用@scroll.native=""，直接使用@scroll无效2.当el-table当宽度无限增加时，需要设置el-table的外层样式为overflow:hidden，el-table的样式为height:100%3.为组件中的组件添加keep-aliveel-tab-pane以避免选项卡切换。每次都会重新请求组件中的接口4.什么时候用this.$set当你在数据中定义一个对象myObject或数组myArr时。对象或数组的属性元素一开始是未知的。后面需要为对象或数组定义属性元素，属性元素是响应式的（即视图需要刷新）。这时候就需要用到this.$set，让属性元素有**getter/setter**，比如this.$set(myObject,'a',1),this.$set(myArr,index,2)（索引是数组的索引）。另外：对数组使用push、pop、shift、unshift、splice、sort、reverse这7个方法都会触发视图更新，所以如果能用这7个方法就不要用this.$set(myArr,指数,2)。5.什么时候使用Object.freeze()当你有一个数据（比如tableData），页面上有一个查询按钮，每次点击查询都会重新赋值tableData，那么这个tableData需要放在data（例如Responsivedata），并且你不会更改tableData中的属性（例如重新分配tableData中的元素），那么你可以这样做来提高性能。data(){return{tableData:Object.freeze([]),}}6.provide和inject的使用我现在使用的场景是有组件关系A->B->C（A是B的父组件，B是C的父组件），现在C要调用A中的方法，可以这样写：:{methodName(){...}}}C组件：exportdefault{inject:['methodName'],methods:{otherMethod(){this.methodName()}}}总结：就是实现调用C（后代组件）组件中没有使用B组件A方法。需要注意的是，provide、inject是一种单向无响应的数据或方法传递。例如，当A组件的someData改变时，不会导致C组件的视图更新。组件：exportdefault{provide(){return{someData:this.someData,}},data(){return{someData:null}},methods:{methodName(){this.someData='123'}}}C组件：{{this.someData}}
exportdefault{inject:['someData'],}7、子组件调用父组件的方法，并子组件需要通过回调获取父组件方法的执行结果。父组件A：...handleChange(val,callback){this.value=val;回调（“你好”）;}子组件B：handleChange(e){this.$emit('change',e.target.value,val=>{console.log(val);//hello});},
