Vue — использование миксинов

Vue.js

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

К счастью, VueJS предоставляет нам Mixins — способ повторного использования одного и того же кода в разных компонентах. Объект Mixin может использовать любые свойства компонента (данные, монтирование, создание, обновление и т. д.), и когда компонент использует миксин, вся информация миксина также будет подмешана в компонент, и компонент может получить доступ все свойства миксина.Как объявление в собственном объекте. Возьмем пример:

// 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возвращает компонент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"

Хорошо, почти там. . .

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

Добро пожаловать в Mixing!

оригинальный

Категории