Múltiples componentes en Vue pueden compartir datos y uso de mezcla de métodos

Requisitos del proyecto: calcular la altura de la mesa, el mixin se divide en referencia global y referencia local

 

Nuevo mixin.js

export const publicMinxin= {
  data() {
    return {
      screenHeight: document.body.clientHeight, // 默认值
      tableHeight: null, // 表格高度 
    }
  },
  methods: {
    getTbHeight() {
      var toolbarFormH=document.getElementById("toolbar-form").offsetHeight;
      this.tableHeight =this.screenHeight -toolbarFormH-331-14;// 初始化表格高度
    },
  },
 
}

 

Uso parcial

Utilizar en index.vue:

<el-table border :data="tableData" style="width: 100%" highlight-current-row :height="tableHeight">
</el-table>
<script>
    import {publicMinxin} from "../../utils/mixin"
    export default{
        mounted(){
            this.getTbHeight();
        }
    }
</script>

Uso global

Introducción a Main.js: tenga en cuenta que la introducción debe colocarse antes de la instancia de Vue

import {publicMinxin} from "./utils/mixin"
Vue.mixin(publicMinxin)

Utilizar en index.vue:

<el-table border :data="tableData" style="width: 100%" highlight-current-row :height="tableHeight">
</el-table>
<script>
    //直接使用
    export default{
        mounted(){
            this.getTbHeight();
        }
    }
</script>

Use los objetos mixin globales con precaución, ya que afectará a cada instancia de Vue creada por separado (incluidas las plantillas de terceros)