目录
简介
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>
结果:
例子: 业务背景:传入的数据为数字,需要批量对数字转译为需要的汉字使用
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()注册的区别
全局挂载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>