@[TOC]
背景
多个vue文件出现大量重复的函数和生命周期处理时使用mix混入
minx混入
当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
vue2官网案例
// 定义一个混入对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
查看vue2的mixins来源
options api
可以混入vueComponent的组件
可见mininx混入的类型为一个vue的类型
使用
1.定义了一个mix.js
声明 mixName变量和mixFunc的函数
export default {
data () {
return {
mixName: 'yma16'
}
},
methods: {
mixFunc () {
console.log('mix的作用域 this', this)
this.$message.info('mix的mixFunc方法')
}
}
}
2. 定义一个组件混入mix
mixins混入定义的mix组件
<template>
<div class="container">
<h1>{
{
msg }}</h1>
<el-divider>mix</el-divider>
<el-button @click="say">
当前组件的say方法
</el-button>
<el-divider>mix</el-divider>
<el-button @click="mixFunc">
mix的方法
</el-button>
</div>
</template>
<script>
import mix from './mix'
export default {
name: 'StudyMix',
mixins: [mix],
data () {
return {
msg: 'mix 混入'
}
},
methods: {
say () {
console.log('当前组件的作用域 this', this)
this.$message.info('组件的say方法')
}
}
}
</script>
mix的同享组件作用域this相同
对比组件和混入的this
验证node的tag一样
this打印的值相同
使用场景
举个我工作中实际应用到的场景
- 表格是使用比较多的，可以提取表格的打印和获取选中行的方法到mix
- 文件下载的方法封装到一个mix去调用
注意点：mix中调用的变量要确保在组件中存在，使用不熟练很容易出现undefined和命名冲突的错误
结尾
感谢阅读，如有问题，欢迎指正！
