文章目录
- 背景
- 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的类型
Vue.js中的mixins提供了一种将多个组件中重复的代码提取为单独的可复用代码块的技术。利用mixins，可以将一些常用的功能抽离出来，使得组件的代码更加简洁，提高了组件的复用性。
在Vue.js2.x中，mixins的使用方式为：
- 定义mixins
// mixins.js
export default {
data() {
return {
message: 'Hello from mixin!'
}
},
methods: {
greet() {
console.log(this.message);
}
}
}- 在组件中引用mixins
import mixins from './mixins.js'
export default {
mixins: [mixins],
mounted() {
this.greet();
}
}上述代码中，mixins.js文件中定义了一个mixin，其中包含了一些常用的data和methods属性，组件中通过mixins选项引用了该mixin，从而获得了mixin中定义的data和methods属性，并可以在组件中使用。
需要注意的是，当组件和mixin中有相同的选项时，组件的选项会覆盖mixin中的选项。另外，使用mixins时要注意避免命名冲突及其可能带来的不良后果。
总之，mixins是Vue.js中一种非常有用的代码复用技术，可以有效地提高我们的开发效率。
使用
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和命名冲突的错误
结尾
感谢阅读，如有问题，欢迎指正！
