vue mixins用法 与 总结

对于vue–mixins混入的理解：

一、代码示例

其实就是普通vue页面的js部分(1：引入、2：注册、3：直接使用)

// 文件位置：/mixins/common.js
export default {
    data(){
         return{
               name:"爸爸" // 引入了我这个文件都可以使用， eg：this.name;
         } 
    },
    created(){} // 其他生命周期都可以使用
    methods:{
        go(){ // 引入他的页面   eg：	 this.go();  当然-也可以传参
           console.log("我是混入函数，引入了我这个文件都可以调用我")；
        }
   }
}

// 文件位置：/pages/home.vue
<template>
    <div>
		{{ name }}
    </div>
</template>

<script>
	// 引入
	import common from "@/mixins/common.js"
    export default {
    	// 注册
    	mixins:[common]
	    data(){
	         return{} 
	    },
	    created(){
	    	// 使用
			console.log("mixins：common中的data",this.name);
			this.add();
		} 
	    methods:{
   }
}
</script>

二、使用Mixins注意

1: data同名： data中数据–mixins覆盖页面。
2: 生命周期： mixins的钩子优先执行。（例如created）
3：函数同名： 页面优先级更高、直接覆盖。
意义： 优化公共冗余JS代码、不用每个页面都写一次；
项目规范：为避免同名问题，我一般给mixins的属性、方法都加上前缀 eg: mixin_initList()