简介

mixins（混入），官方的描述是一种==分发 Vue ==组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和易于维护。

什么时候使用Mixins？

当我们存在多个组件中的数据或者功能很相近时，我们就可以利用mixins将公共部分提取出来，通过 mixins封装的函数，组件调用他们是不会改变函数作用域外部的。

如何创建Mixins？

在src目录下创建一个mixins文件夹，文件夹下新建一个myMixins.js文件。前面我们说了mixins是一个js对象，所以应该以对象的形式来定义myMixins，在对象中我们可以和vue组件一样来定义我们的data、components、methods 、created、computed等属性，并通过export导出该对象

使用Mixins

在需要调用的组件中引入myMixins.js文件，然后在export default 中引入你需要的对象即可

<template>
  <div class="home">数据{{ age }}</div>
</template>

<script>
import { myMixins } from "@/mixins/myMixins.js";
export default {
  mixins: [myMixins],
  mounted() {
    this.age++;
  },
  methods: {},
};
</script>

结果:

mixins详细讲解链接

例子: 业务背景:传入的数据为数字,需要批量对数字转译为需要的汉字使用

element表格中使用插槽(引入的是mixins写的方法)

 <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          label="表格类目"
        >
          <template slot-scope="scope">
            <span>{{ auditState(scope.row.数据) }}</span>
          </template>
        </el-table-column>

封装的mixins文件

export const myMixins = {
    components: {},
    data() {
        return {   }
    }, 
    methods: {
        auditState(id) {
            let str = "";
            if (id == "01") {
                str = "待审核";
            }
            if (id == "02") {
                str = "审核中";
            }
            if (id == "03") {
                str = "审核通过";
            }
            if (id == "04") {
                str = "审核不通过";
            }
            return str;
        }
    }
}

组件中使用

import { myMixins } from "@/myMixin/myMixins.js";
export default {
  mixins: [myMixins],
mounted() {//挂载后
    this.auditState();//调用,这里调用不用写形参,引入的方法中写了形参
  },
}

当传入数字为 01 时得到转换

Vue.use 和 Vue.prototype.xxx ,Vue.component()的全局引用文件区别

• Vue.component注册全局组件在main.js文件中进行公用组件 .vue注册
• Vue.use注册全局插件常用于各种配置文件中进行npm包引入组件的注册，如Vue.use(ElementUI);
• Vue.prototype.$xxx通过在vue原型上定义它们使其在每个 Vue 的实例中可用,也就是注册.js文件

Vue.use 和 Vue.prototype.xxx 的全局引用js文件区别

vue框架中Vue.use()注册与Vue.component()注册的区别

模块化 require和import的区别

全局挂载js文件

vue.use使用情况是：当引用的插件里面写了install方法，调用方法直接调用install方法里的，如Vue.use(VueRouter)、Vue.use(ElementUI)、

vue.prototype使用情况是：引用的插件里没有install，使用通过exportdefault暴露对象调用接口的，如vue.prottype.axios=axios

一般的像ui这种比较大的插件通常是按需引入

全局挂载封装的js

import*as Plugin from './plugin.js';
Vue.prototype.$Plugin  = Plugin;

在页面中全局使用js方法

this.$Plugin.plug2()

vue引入外部的js

1.export

新建js文件

使用

<script>
import { transition } from "@/assets/js/extern"; //方法主要解构使用
export default {
  created() {
    this.a();
  },
  methods: {
    a() {
      transition(2);
    },
  },
};
</script>

当有多个js方法时

2.export default

import sz from "@/assets/sz";//不用解构
console.log(sz);

3 js导出变量

例如:  a.js  导出默认模块
let data;
data = 1;
export default data


导入(不用解构)
import  data  from "./a.js"

常规的导出导入

1,必须{}格式

2,导入时必须{}匹配

例如:  a.js  导出
  let data;
     data = 1;
export { data };


导入
import { data } from "./a.js"

还有一种写法

例如:  a.js  导出
    export let data;
data = 1;



导入
import { data } from "./a.js"

挂载全局css样式

新建样式文件.css后缀

挂载全局
在main.js中

import "./assets/css/index.css"

页面中直接使用标签

 <div class="cool">颜色</div>

data中定义css样式

vue在css样式中使用data中的变量链接