Vue.js 期权合并
示例
当mixin和组件本身包含重叠选项时,将使用适当的策略将它们“合并”。例如,具有相同名称的钩子函数将合并到一个数组中,以便将全部调用它们。另外,mixin挂钩将在组件自己的挂钩之前被调用:
var mixin = { created: function () { console.log('mixin hook called') } } new Vue({ mixins: [mixin], created: function () { console.log('component hook called') } }) // -> "mixin hook called" // -> "component hook called"
那些期望对象的值,例如选项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()