Abr@X@bra.ru
Как управлять миксинами во Vue.js

Как управлять миксинами во Vue.js

18.01.2019
250

Когда ваш проект Vue начинает расти, вы можете копировать и вставлять одни и те же данные, методы снова и снова, если у вас есть похожие компоненты. Конечно, вы можете записать все эти отдельные файлы как один компонент и использовать его, но использование такого подхода может вас легко запутать. Чтобы избежать этой сложной задачи, большинство людей просто продолжают добавлять дублирующийся код, несмотря на ощущение, что есть лучшее решение.

К счастью во vue есть mixins - это самый простой способ обмена повторно используемого кода между различными компонентами. Объекты mixin могут использовать любой из параметров компонента - data, mounted, created, update и т. д. - и когда компонент использует mixin, вся информация в объекте mixin будет, доступна компоненту. Компонент получит доступ ко всем опциям в миксине, как если бы он был объявлен в самом компоненте. Это будет иметь больше смысла после примера.


Как вы можете видеть, после использования mixin, компонент содержит все данные миксина, и может осуществлять доступ к ним. Вы также можете определить миксин, используя переменную вместо отдельного файла. Честно говоря, это большая часть того, что вам нужно знать о mixin во vue.js.

Конфликт имен

Конфликт именования между компонентом и его mixin может возникнуть, когда в миксине есть данные, методы или любые параметры компонента, имя которых совпадает с именем параметра в компоненте. Если это происходит, свойство в самом компоненте будет иметь приоритет. Например, если в компоненте и в mixin есть переменная данных title, this.title вернет значение, определенное в компоненте. В коде это выглядит так:

Итого

Если вы хотите узнать о более сложных темах, таких как глобальные миксины и пользовательские настройки, эта информация доступна в их документации по mixin. Мне нравится документация Vue, я думаю, что она очень хорошо написана и проста для понимания.





Vue.js, mixins
Читайте также:
Vue.js + GSAP =  Крутая анимация

Vue.js + GSAP =  Крутая анимация

Vue.js - это структура Javascript, которая одновременно является мощной и простой. С помощью Vue CLI мы можем быстро вне...
Читать
Vue.js – эффект увеличения изображения как на medium.com

Vue.js – эффект увеличения изображения как на medium.com

Данный эффект делает красивое масштабирование изображения.
Читать
Vue.js 2 + Firebase

Vue.js 2 + Firebase

Создание веб-приложений в режиме реального времени с использованием Vue.js 2 и Firebase.
Читать