Vue中的mixins(混合)使用方法
Posted asdfasdfasdad
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue中的mixins(混合)使用方法相关的知识，希望对你有一定的参考价值。
混合
来源：https://cn.vuejs.org/v2/guide/mixins.html基础
混合 (mixins) 是一种分发 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!"
|
选项合并
当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合。比如，同名钩子函数将混合为一个数组，因此都将被调用。另外，混合对象的 钩子将在组件自身钩子 之前 调用 ：
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:
bar:
function ()
console.log(
'bar')
,
conflicting:
function ()
console.log(
'from self')
)
vm.foo()
// => "foo"
vm.bar()
// => "bar"
vm.conflicting()
// => "from self"
|
注意：Vue.extend() 也使用同样的策略进行合并。
全局混合
也可以全局注册混合对象。注意使用！ 一旦使用全局混合对象，将会影响到 所有 之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin(
created:
function ()
var myOption =
this.$options.myOption
if (myOption)
console.log(myOption)
)
new Vue(
myOption:
'hello!'
)
// => "hello!"
|
谨慎使用全局混合对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。也可以将其用作 Plugins 以避免产生重复应用
自定义选项合并策略
自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：
Vue.config.optionMergeStrategies.myOption =
function (toVal, fromVal)
// return mergedVal
|
对于大多数对象选项，可以使用 methods 的合并策略：
var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods
|
更多高级的例子可以在 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)
|
以上是关于Vue中的mixins(混合)使用方法的主要内容，如果未能解决你的问题，请参考以下文章