Как управлять миксинами в VueJS
Когда ваш проект Vue начнет расти, вы можете снова и снова копировать и вставлять одни и те же данные, методы и наблюдатели, если у вас есть похожие компоненты. Конечно - вы можете записать все эти отдельные файлы как один компонент и использовать реквизиты, чтобы попытаться настроить их, но использование такого большого количества реквизитов может легко запутать и загромождать. Чтобы избежать этой сложной задачи, большинство людей просто продолжают добавлять повторяющийся код, несмотря на ощущение, что есть лучшее решение.
К счастью, боги VueJS благословили нас миксинами - одним из самых простых способов обмена повторно используемым кодом между различными компонентами. Объекты миксина могут использовать любые параметры компонента - данные, смонтированные, созданные, обновленные и т. Д. - и когда компонент использует миксин, вся информация в объекте миксина будет смешана с компонентом. После этого компонент получит доступ ко всем параметрам миксина, как если бы он был объявлен в самом компоненте. Это станет более понятным после примера.
// mixin.js file
export default {
data () {
msg: ‘Hello World’
},
created: function () {
console.log(‘Printing from the Mixin’)
},
methods: {
displayMessage: function () {
console.log(‘Now printing from a mixin function’)
}
}
}
// -----------------------------------------------------------
// main.js file
import mixin from ‘./mixin.js’
new Vue({
mixins: [mixin],
created: function () {
console.log(this.$data)
this.displayMessage()
}
})
// => "Printing from the Mixin"
// => {msg: ‘Hello World’}
// => "Now printing from a mixin function"
Как видите, после использования миксина компонент содержит все данные в миксине, и к нему можно получить доступ с помощью this . Вы также можете определить миксин, используя переменную вместо отдельного файла. Честно говоря, это большая часть того, что вам нужно знать о миксинах, но я думаю, что было бы полезно узнать больше о некоторых случаях использования и угловых случаях.
Что произойдет, если возникнет конфликт имен?
Конфликт именования между компонентом и его миксином может произойти, когда в миксине есть данные, методы или любые параметры компонента, которые имеют то же имя, что и опция в компоненте. Если это произойдет, свойство в самом компоненте будет иметь приоритет. Например, если есть переменная данных title и в компоненте, и в миксине - this.title вернет значение, определенное в компоненте. В коде это выглядит так:
// mixin.js file
export default {
data () {
title: ‘Mixin’
}
}
// -----------------------------------------------------------
// main.js file
import mixin from ‘./mixin.js’
export default {
mixins: [mixin],
data () {
title: ‘Component’
},
created: function () {
console.log(this.title)
}
}
// => "Component"
Готово! Э, ну ... пока.
Как и во всем остальном, миксины VueJS всегда могут чему-то научиться, но этого должно быть достаточно для начала работы, и оно охватывает большинство случаев использования. Если вы хотите узнать о более сложных темах, таких как глобальные миксины и пользовательские настройки слияния во Vue, эта информация доступна в их документации для миксинов. Мне нравится документация по Vue, я считаю, что она очень хорошо написана и проста для понимания.
Удачного смешивания!
