vue——公共代码抽离,混入 mixin

混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

PS:简单来说就是多个组件复用的公共属性或方法函数定义在一个单独的js文件,在使用的组件内引入即可

定义mixin.js文件

	export default{
    
    
		data(){
    
    
			return {
    
    
				username:'',
				city:''
			}
		},
		methods:{
    
    
			add(){
    
    
				
			}
		},
		mounted() {
    
    
			
		}
	}

组件内使用

import mixin from './mixin.js'

export default{
    
    
	mixins:[mixin],

}

混入与组件内同名属性或方法冲突时:数据方法都是组件优先,勾子函数都会执行,混入的先执行

  1. 数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
  2. 同名钩子函数将合并为一个数组,都会被调用。混入对象的钩子将在组件自身钩子之前调用。
  3. 值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。

猜你喜欢

转载自blog.csdn.net/weixin_51198863/article/details/114081504