JavaScript

Миксины в VueJS

Spread the love

Короткая заметка и миксинах в 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

Была ли вам полезна эта статья?
[6 / 1.7]

Spread the love
Editorial Team

Recent Posts

Vue 3.4 Новая механика v-model компонента

Краткий перевод: https://vuejs.org/guide/components/v-model.html Основное использование​ v-model используется для реализации двусторонней привязки в компоненте. Начиная с Vue…

10 месяцев ago

Анонс Vue 3.4

Сегодня мы рады объявить о выпуске Vue 3.4 «🏀 Slam Dunk»! Этот выпуск включает в…

10 месяцев ago

Как принудительно пере-отобразить (re-render) компонент Vue

Vue.js — это универсальный и адаптируемый фреймворк. Благодаря своей отличительной архитектуре и системе реактивности Vue…

2 года ago

Проблемы с установкой сертификата на nginix

Недавно, у меня истек сертификат и пришлось заказывать новый и затем устанавливать на хостинг с…

2 года ago

Введение в JavaScript Temporal API

Каким бы ни было ваше мнение о JavaScript, но всем известно, что работа с датами…

2 года ago

Когда и как выбирать между медиа запросами и контейнерными запросами

Все, кто следит за последними событиями в мире адаптивного дизайна, согласятся, что введение контейнерных запросов…

2 года ago