Vue의 여러 구성 요소는 데이터 및 메서드 믹스 인 사용을 공유 할 수 있습니다.

프로젝트 요구 사항 : 테이블 높이 계산, mixin은 글로벌 참조와 로컬 참조로 나뉩니다.

 

새로운 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;// 初始化表格高度
    },
  },
 
}

 

부분 사용

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>

글로벌 사용

Main.js 소개 : 소개는 Vue 인스턴스 앞에 배치해야합니다.

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

index.vue에서 사용 :

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

개별적으로 생성 된 각 Vue 인스턴스 (타사 템플릿 포함)에 영향을 미치므로 글로벌 믹스 인 개체를주의해서 사용하십시오.