Короткая заметка и миксинах в VueJs
Когда ваш проект на Vue начинает расти, возможно вам приходилось копипастить одни и те же данные, методы и ватчеры снова и снова в разных компонентах проекта. Безусловно можно выделить эти данные в отдельные компоненты и передавать данные между ними через props. Но использование большого количества props очень быстро сделать ваш проект более запутанным и загроможденным.
К счастью в VueJS есть такое понятие как Mixins — наиболее простой способ обмена повторно используемого кода между компонентами. Объекты Mixin могут содержать в себе все опции обычных компонентов — data, mounted, created, update, и т. д. Данные миксинов и используемых их компонентов легко доступны друг для друга. Это станет более очевидно после просмотра следующего примера.
// 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"
Как вы можете ваидеть, после задействования mixin, компонент содержит все данные прописанные в mixin, и они легко доступны через this
. Вы также можете определить миксин, используя переменную вместо отдельного файла. Честно говоря, это большая часть того, что вам нужно знать о миксинах.
Конфликт имен между компонентов и миксином может случится когда будут использованы одниковые именна переменных или методов в миксине и компоненте. В этом случае свойства компонента переопределять соотвествующие свойства миксина Для примера в случае использование переменной title
в data и в миксине и в компоненте — 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 всегда есть что-то, чему можно научиться. И эта статья была лишь ознакомительная заметка о использование миксинов. Если вы хотите узнать о более сложных моментах, таких как глобальные миксины и т.п., эта информация доступна в документации по миксинам.
Оригинал: How to Manage Mixins in VueJS
Краткий перевод: https://vuejs.org/guide/components/v-model.html Основное использование v-model используется для реализации двусторонней привязки в компоненте. Начиная с Vue…
Сегодня мы рады объявить о выпуске Vue 3.4 «🏀 Slam Dunk»! Этот выпуск включает в…
Vue.js — это универсальный и адаптируемый фреймворк. Благодаря своей отличительной архитектуре и системе реактивности Vue…
Недавно, у меня истек сертификат и пришлось заказывать новый и затем устанавливать на хостинг с…
Каким бы ни было ваше мнение о JavaScript, но всем известно, что работа с датами…
Все, кто следит за последними событиями в мире адаптивного дизайна, согласятся, что введение контейнерных запросов…