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)

	}

}

页面混入模块

var mixinClock = {

	data() {

		return {

			clock: '',

			interalId: '',

		}

	},

	created() {

		this.interalId = setInterval(()=>{

			this.setClock()

		}, 1000)

	},

	destroyed() {

		clearInterval(this.interalId)

	},

	methods:{

		setClock() {

			this.clock = this.dateTimeFormatter(new Date())

			console.log(this.clock)

		},

		dateTimeFormatter(_date) {

			let date = new Date(_date);

			let y = date.getFullYear();

			let M  = (date.getMonth()).toString().padStart(2, '0');

			let d = (date.getDate()).toString().padStart(2, '0');

			let h = (date.getHours()).toString().padStart(2, '0');

			let m = (date.getMinutes()).toString().padStart(2, '0');

			let s = (date.getSeconds()).toString().padStart(2, '0');

			return `${y}-${M}-${d} ${h}:${m}:${s}`

		}

	}

}

new Vue({

	el: '.main-container',

	mixins: [mixinClock],

})

巴特西

VUE学习-mixin混入

mixin混入

自定义选项合并策略

页面混入模块

最新文章

热门文章