VUE学习-mixin混入

2022-08-13 18:32:27 阅读：111 来源： 互联网

标签：function 混入 VUE console log Vue mixin

mixin混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

组件式混入

// 定义一个混入对象
var myMixin = {
	created: function () {this.hello()},
	methods: {
		hello: function () { 
			console.log('hello from mixin!')
		} 
	}
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({mixins: [myMixin]})
var component = new Component() // => "hello from mixin!"

vue实例混入

数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

var mixin = {
	data: function () {
		return {message: 'hello',foo: 'abc'}
	}
}
new Vue({
	mixins: [mixin],
	data: function () {
		return {message: 'goodbye',bar: 'def' }
	},
	created: function () {
		console.log(this.$data)
	}
	// => { message: "goodbye", foo: "abc", bar: "def" }
})

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

var mixin = {
	created: function () {
		console.log('混入对象的钩子被调用')
	}
}
new Vue({ 
	mixins: [mixin],
	created: function () {
		console.log('组件钩子被调用')
	}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

var mixin = {
	methods: {
		foo: function () {
			console.log('foo')
		},
		conflicting: function () {
			console.log('from mixin')
		}
	}
}
var vm = new Vue({
	mixins: [mixin],
	methods: {
		conflicting: function () {
			console.log('from self')
		}
	}
})
vm.foo() // => "foo"
vm.conflicting() // => "from self"

全局混入
一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
	created: function () {
		var myOption = this.$options.myOption;
		if (myOption) {console.log(myOption)}
	}
})
new Vue({myOption: 'hello!'})
// => "hello!"

自定义选项合并策略

自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数。

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
	/* 返回合并后的值 */
}
// Vuex 1.x 的混入策略
const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
	if (!toVal) return fromVal
	if (!fromVal) return toVal
	return {
		getters: merge(toVal.getters, fromVal.getters),
		state: merge(toVal.state, fromVal.state),
		actions: merge(toVal.actions, fromVal.actions)
	}
}

标签：function,混入,VUE,console,log,Vue,mixin
来源： https://www.cnblogs.com/-LemonWater-/p/16583741.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VUE学习-mixin混入

mixin混入

自定义选项合并策略