Vue 與 Element-ui 常見問題解決

Vue 與 Element-ui 使用的一些總結

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
    });
  },