mixin有什么用？
简而言之，就是可以把vue中的data、method、mounted（生命周期）、filter、watch、props这些option api都一口气导入。在项目过程中，我们有时候会写一些方法，这些方法会执行一系列相同的操作。这个时候，如果通过Mixin混入，则可以有效减少重复的代码。
怎么用Mixin?
talking is cheap, show me you code!直接上代码：
//mixin.js
export const logInfo = {
methods: {
showInfo() {
console.log('来自mixin的消息')
},
},
mounted (){
console.log('大家好，我是mixin.js') //console.log('大家好，我是mixin.js')
}
}
//component.vue
<template>
<div id="myChart" />
</template>
<script>
import { logInfo } from './mixin.js';
export default {
name: 'Mixin',
mixins: [ logInfo ],
mounted (){
this.showInfo() //console.log('来自mixin的消息')
}
}
</script>
这就是mixin最简单的用法，通过mixin这个api，我们实现了在组件中调用或者执行外部导入的方法。mixin的最大特点就是，不仅能混合数据和方法，还能混合生命周期，filter过滤器，computed计算属性等option api。值得注意的是，当mixin中的methods和组件中的methods相同时，mixin中的方法会被覆盖更新。而mounted等生命周期中的方法都会执行，而mixin中的生命周期会先执行，而组件中的生命周期后执行。
用Mixin实现echarts图标自动生成。
echarts是开发中经常使用的数据可视化库，用它可以生成许多可视化效果很好的图表。echarts组件的图表生成、销毁以及动态变化大小这些功能的代码都是重复的，将其写进mixin中，可以有效减少重复代码，如下：
// echartsMixin.js
// 生成能够自适应并自动轮播tips的echarts图表
import echarts from 'echarts'
export const echartsMixin = {
data() {
return {
myChart: null,
option: {},
}
},
mounted() {
this.myChart = echarts.init(document.getElementById(this.id))
this.myChart.setOption(this.option)
window.addEventListener('resize', () => {
this.myChart.resize()
})
this.autoTips()
},
methods:{
autoTips() {
console.log(1111111111111);
// 动态显示tootip
let faultByHourIndex = 0 // 播放所在下标
// eslint-disable-next-line
let faultByHourTime = setInterval(() => { // 使得tootip每隔三秒自动显示
this.myChart._api.dispatchAction({
type: 'showTip', // 根据 tooltip 的配置项显示提示框。
seriesIndex: 0,
dataIndex: faultByHourIndex
})
faultByHourIndex++
if (faultByHourIndex > this.option.series[0].data.length) {
faultByHourIndex = 0
}
}, 3000)
this.$once('hook:beforeDestroy', () => {
clearInterval(faultByHourTime)
})
}
}
}
//component.vue
<template>
<div id="myChart" />
</template>
<script>
import { echartsMixin } from './echartsMixin.js';
export default {
name: 'Mixin',
mixins: [echartsMixin],
data() {
return {
option: {
color: ['#30E57D', '#F26443', '#8A979D'],
title: {
text: '各区域设备运行情况分析',
textStyle: {
color: '#ffffff',
fontSize: 14
},
left: '2%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['在线', '离线'],
textStyle: {
color: '#ffffff',
fontSize: 12
},
right: '3%'
},
grid: {
left: '3%',
right: '3%',
bottom: '0%',
height: '80%',
containLabel: true
},
xAxis: {
axisLabel: {
color: '#ffffff'
},
type: 'category',
data: ['C区域', 'D区域', 'E区域', 'F区域', 'G区域', 'H区域']
},
yAxis: {
splitLine: {
lineStyle: {
color: '#7d7d7e'
}
},
axisLabel: {
color: '#ffffff'
},
type: 'value',
boundaryGap: [0, 0.01]
},
series: [
{
name: '在线',
type: 'bar',
data: [10, 6, 8, 9, 12, 7]
},
{
name: '离线',
type: 'bar',
data: [1, 2, 1, 2, 1, 1]
}
]
},
id: "myChart"
}
}
}
</script>
<style lang="scss" scoped>
#myChart {
height: 500px;
background-color: black;
}
</style>
结果如图：
