Vue混入

混入 mixins

就是在vue组件的风格不同（就是显示的内容不一样）同时在多个组件中有一些相同的属性和方法显然我们不能在每个组件里面都写一遍 我们需要那这些相同的内容提取出来 写成一个公共的 那么这个公共的文件就叫mixins

局部混入

创建混入文件

let myMixins={
    data(){
        return {
            text:"呵呵"
        }
    },
 methods:{
        fun(){
            alert("你好")
        }
    },
    directives:{
        xiaoming:{
            inserted(el){
                el.style.backgroundColor="red"
            }
        }
    }
}
​
// 不要忘了暴露
export default myMixins

使用混入 用mixins属性对应一个数组

<template>
  <div>
      demoa
        <button @click="fun()">点我弹出你好</button>
  </div>
</template>
​
<script>
import myMixins from "@/mixins"
export default {
//   使用混入
    mixins:[myMixins]
}
</script>
​
<style>
​
</style>

全局混入

在任何组件中都可以使用 在main中引用 并且使用 import MinXin from '@/components/MinXins/index.js' Vue.mixin(MinXin);

在组件中即可随意使用混入中的数据