MyTetra Share
Делитесь знаниями!
Примеси (mixins) в Vue
24.02.2018
19:19
Автор: br0ke
Текстовые метки: javascript, js, vue, vuejs, vue.js, mixin, mixins, duplication, code reuse
Раздел: Информационные технологии - JavaScript - Vue

Примеси (mixins) -- гибкий способ повторного использования кода между компонентами Vue. Примесь может содержать любые опции компонента Vue (data, methods, computed, ...).


Опции из примеси будут добавлены в собственные опции компонента. При этом компоненты будут иметь независимые объекты data, даже если унаследовали их из одной примеси. В случае пересечения опций компонента и примеси будут использованы опции компонента. Хуки жизненного цикла, унаследованные из примеси, будут вызваны до хуков компонента -- это позволяет компоненту иметь приоритет над примесью.


Пример:

// define a mixin object
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}

// define a component that uses this mixin
var Component = Vue.extend({
mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"


Глобальная примесь

=============


Можно применить примесь глобально ко всем компонентам и экземплярам Vue. Использовать с осторожностью!


// inject a handler for `myOption` custom option
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})

new Vue({
myOption: 'hello!'
})
// => "hello!"


Так же в этом разделе:
 
MyTetra Share v.0.52
Яндекс индекс цитирования