Как подключить mixin в Vue.js?

@fred Вы можете переиспользовать методы или какую то часть кода в нескольких компонентах и создать mixin и Вам нужно просто импортировать его в компонент и использовать mixins: и передать как массив (можно использовать несколько миксинов) и затем можно вызвать метод, к примеру из этого миксина в компоненте, ниже код как пример как можно подключить mixin в Vue.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<template>
  <div class="container">
    <h1>Тестовый компонент</h1>
  </div>
</template>

<script>
import TestMixin from '@/mixin/TestMixin'

export default {
  name: 'Parent',
  mixins: [TestMixin],
  methods: {
    callMethod() {
      // Вызвать метод из миксина
      this.methodFromMixin()
    },
  },
}
</script>

@fred 

Чтобы подключить mixin в Vue.js, следует выполнить следующие шаги:

1. Создать файл mixin.js с вашими миксинами.
2. В компоненте, где вы хотите использовать миксин, подключите его следующим образом:

1
2
3
4
5
6
7
8

import mixin from './mixin.js';

export default {
  mixins: [mixin],
  // остальная логика компонента
}

1. Используйте методы и свойства миксина в своем компоненте, например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

export default {
  mixins: [mixin],
  data() {
    return {
      message: 'Hello',
    }
  },
  created() {
    this.alertMessage();
  },
  methods: {
    showMessage() {
      console.log(this.message);
    }
  }
}

1. Методы и свойства миксина будут доступны внутри компонента. Обратите внимание, что если миксин и компонент имеют одноименные методы или свойства, то они будут перезаписаны свойствами компонента. Чтобы избежать конфликтов, следует задавать уникальные имена.