我要评论mixins在vue中的用法
一、mixins混入
混入（mixins）提供了一种非常灵活的方式，来分发vue组件中的可服用功能。一个混入对象可以包含任意的组件选项（vue在script的部分）。当组件使用混入对象时，所有混入对象的选项都将被“混合”进入改组件本身的选项。
vue提供的一种混合机制，能够更好的实现组件功能复用，混合对象（mixins）可以包含任意组件选项（data、created、mounted、methods、filters等），组件引入后相关选项会进行合并，相当于引入后，父组件各属性进行扩充；
二、组件和mixins的区别
组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，本质上两者还是泾渭分明，相对独立。
mixins则是在引入组件之后，是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充。
简单理解：减少代码冗余，提高开发效率，复用组件数据，方法等，以提高开发速度
三、为什么使用mixins
- mixins分为全局混入和局部混入，下面我们着重讲局部混入
- 注意不同组件混入之后，会生成不同的实例，数据会相互隔离，互不影响
- 注意在引入mixins的同时，组件中重复定义，minxins中的属性方法会被覆盖
- 使用 mixins 之后，该组件包含 mixins 中的所有数据，并且可以使用
this进行访问。 您也可以使用变量而不是单独的文件来定义 mixins
四、vue项目实际使用
- 新建
src/minxins/index.js
// 引入下载文件接口
import { downtemplatefile } from '@/api/home'
// 导出 mymixins 函数
export const mymixins = {
data() {
return {
}
},
methods: {
// 下载方法，参数传文件id
tologin(id) {
downtemplatefile({ id1: id }).then(res => {
if (res.size != 97) {
let blob = new blob([res])
let objecturl = window.url.createobjecturl(blob)
if (navigator.mssaveblob) {
return navigator.mssaveblo(blob, '下载文件.doc')
} else {
let a = document.createelement('a')
document.body.appendchild(a);
a.style.display = 'none'
a.setattribute('href', objecturl)
a.setattribute('download', '下载文件.doc')
a.click();
url.revokeobjecturl(objecturl);
}
} else {
this.$message.error('系统错误，请稍后重试！')
}
})
}
}
}index.vue引入注册并使用mixins
<template>
<div class="index">
<button @click="downloadtempfile(1)">触发mixins下载方法</button>
</div>
</template>
<script>
// 引入 mymixins 函数，导出什么就引入什么
import { mymixins } from '@/mixins';
export default {
data(){
return {
}
},
// 注册
mixins: [mymixins],
methods:{
async downloadtempfile(id){
// 直接使用this.方法名就可以调用到mymixins里的方法
this.tologin(id)
},
}
}
</script>五、全局混入(不推荐)
main.js
import vue from 'vue'
import app from './app.vue'
import { mymixins } from "@/mixins"
vue.mixin(mymixins);
vue.config.productiontip = false
new vue({
render: h => h(app),
}).$mount('#app')总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论