Vue 中多个组件可以共享数据和方法 Mixin 的用法

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

项目需求：使用element-ui 多个页面table表格，公用方法去计算表格高度， mixin分全局引用和局部引用

mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

新建mixin.js

  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>
<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 实例 (包括第三方模板)

扩展extends vue的extends和mixins类似，通过暴露一个extends对象到组件中使用。

extends会比mixins先执行。执行顺序：extends  > mixins > 组件

extends只能暴露一个extends对象，暴露多个extends不会执行

public.js：

//暴露mixins对象
export const mixinsDemo1 = {
    methods: {
        test1() {
            console.log("mixinsDemo1");
        }
    },
    beforeCreate(){
        console.log("mixinsDemo1 beforeCreated");
        
    },
    created() {
        this.test1();
    },
}


export const mixinsDemo2 = {
    methods:{
        test2(){
            console.log("mixinsDemo2");
        }
    },
    created() {
        this.test2();
    },
}

//只能使用一个extends对象，多个无效，extends会先于mixins执行
export const extendsDemo = {
    methods: {
        test3() {
            console.log("test33333");
        }
    },
    beforeCreate(){
        console.log("extendsDemo beforeCreated");
        
    },
    created() {
        this.test3();
    },
}

vue组件：

<template>
<div>
    11111
</div>
</template>
<script>
import {mixinsDemo1,mixinsDemo2,extendsDemo} from '../public.js'//引用
export default {
  beforeCreate(){
    console.log("组件的beforeCreated");   
  },
  created(){
      console.log("1212");
  },
  mixins:[mixinsDemo2,mixinsDemo1],
  extends:extendsTest  // 使用extends
}
</script>