Vue-与-Elementui-使用的一些总结

jiezi

5 年前

1. 在组件上监听滚动事件时要使用 @scroll.native=””, 直接使用 @scroll 无效
2. el-table 当看到宽度无限增加时，需要设置 el-table 外层样式为 overflow: hidden, el-table 样式为 height: 100%
3. el-tab-pane 里的组件加 keep-alive, 避免页签切换时，每次都会重新请求组件里的接口

<el-tabs
  v-model="curTab"
  type="card"
>
  <el-tab-pane
    label="跟进"
  >
    <keep-alive>
       <your-component v-if="curTab==='abc'"></your-component>
    </keep-alive>
  </el-tab-pane>
</el-tabs>

4. 什么时候使用 this.$set

当你在 data 里定义一个对象 myObject 或数组 myArr，对象或数组的 属性元素 刚开始未知，后面你要给对象或数组 定义属性元素，而且这属性元素是响应式的（即视图要刷新），这时需要使用 this.$set，使得属性元素拥有 **getter/setter**，如 this.$set(myObject, ‘a’, 1), this.$set(myArr, index, 2) (index 是数组的索引)。

另外：对数组使用 push,pop,shift,unshift,splice,sort,reverse 这 7 个方法，会触发视图更新，所以能用这 7 个方法，就别用 this.$set(myArr, index, 2)。

5. 什么情况使用 Object.freeze()

当你有一个数据（比如说表格 tableData），页面上有一个查询按钮，每次点查询都会重新赋值 tableData，那么这个 tableData 是需要放到 data 里的（作响应式数据用），而且你也不会改变 tableData 里的属性（如给 tableData 里的一个元素重新赋值），这时你可以这样做以提高性能。

data () {
    return {tableData: Object.freeze([]),
    }
}

6. provide,inject 的使用

我现在使用到的场景是，有一个组件关系是 A->B->C (A 是 B 的父组件，B 是 C 的父组件)，现在 C 要调用 A 里面的方法，可以这样写：

A 组件：

export default {provide () {
      return {methodName: this.methodName,}
    },
  methods: {methodName () {…}
  }
}

C 组件：

export default {inject: ['methodName'],
  methods: {otherMethod() {this.methodName()
    }
  }
}

总结：就是不通过 B 组件，实现 C(后代组件) 调用 A 组件里面的方法。

需要注意的是 ，provide,inject 是一种 单向非响应式 的数据或方法传递，比如说下面这样使用，当 A 组件的 someData 改变后，并不会导致 C 组件的视图更新。

A 组件：

export default {provide () {
    return {someData: this.someData,}
  },
  data() {
    return {someData: null}
  },
  methods: {methodName () {this.someData = '123'}
  }
}

C 组件：

<template>
  <div>{{this.someData}}</div>
</template>
export default {inject: ['someData'],
}

7. 子组件调用父组件的方法，并且子组件需要拿到父组件方法的执行结果，可以用 callback 实现。

父组件 A：

 <B @change="handleChange"></B>
 ...

  handleChange(val, callback) {
   this.value= val;
   callback("hello");
  }

子组件 B：

  handleChange(e) {
    this.$emit('change', e.target.value, val => {console.log(val); // hello
    });
  },

Vue 与 Element-ui 使用的一些总结