文章目录
- 背景
- minx混入
- 使用
- 1.定义了一个mix.js
- 2. 定义一个组件混入mix
- mix的同享组件作用域this相同
- 使用场景
- 结尾
背景
多个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的组件
继承composition api v3版本的(有setup)
可见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和命名冲突的错误
结尾
感谢阅读,如有问题,欢迎指正!