基础

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

例子：

            const myMixin = {
				created: function() {
					this.hello()
				},
				methods: {
					hello: function() {
						console.log('hello from mixin!')
					}
				}
			}
			
			const Component = Vue.extend({
				mixins: [myMixin]
			})
			
			const component = new Component()

选项合并 

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

//比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
			const mixin = {
				data: function() {
					return {
						message: 'hello',
						foo: 'abc'
					}
				}
			}
			
			const vm = new Vue({
				mixins: [mixin],
				data: function() {
					return {
						message: 'goodbye',
						bar: 'def'
					}
				},
				created: function() {
					console.log(this.$data)
				}
			})

全局注入 

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的Vue实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

Vue.mixin({
    created: function() {
        const myOption = this.$options.myOption
        if(myOption) {
            console.log(myOption)   
        }
    }
})

自定义选项合并策略 

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

Vue.config.optionMergeStrategies.myOption = function(toVal, fromVal) {
    //返回合并后的值
}

对于多数值为对象的选项，可以使用与methods相同的合并策略：

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

最后

以上就是陶醉期待为你收集整理的Vue 混入mixin基础选项合并 全局注入 自定义选项合并策略 的全部内容，希望文章能够帮你解决Vue 混入mixin基础选项合并 全局注入 自定义选项合并策略 所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。