vue与混合样式mixins

有时候我们需要写一点代码，但是这种代码重复性很高，是否有一种方法可以直接写在一起，然后各个组件需要的时候引用就可以呢
当然有，混合样式mixins，将一个js分别引入到vue的方法。

我们介绍这个东西怎么用

首先我们可以在这里新建一个文件，

里面包含vue的一些方法，比如说method，props这些，注意写成对象形式

export const mt={//分别暴露
    methods:{
        showName(){
            console.log(this.name)
        }
    }
}

然后在vue里面引入这个就可以使用了。

<script>
import {mt} from '../mixin'//将文件引入
export default {
  name: 'HelloWorld',
  data(){
    return {
      MyNum:10
    }
  },
  mixins:[mt],//在这里声明引入
  methods:{
    chanceNum(){
      this.MyNum++;
    }
  },
}
</script>

看上面尽管没有showName函数，但是我们引入了这个东西其实也可以调用这个方法。
这样子在现实开发中，很多组件都有可能拥有相同部分，很多代码里面有重复的，就可以通过这种方法，在每个组件里 mixins:[mt]来减少重复代码

注意的几点
若是引入组件也有相应的data或者method数据，则组件里面的method和data优先

对于生命周期的混合复用来说，则是都要，比如这个地方mounted挂载函数绑定输出一个aaa，在引入这个混合复用的组件里面mounted挂载函数也绑定一个输出bbb，则aaa和bbb同时输出，没有优先级也没有覆盖