Partajare funcții între componente Vue.js

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
Marius
Mesaje:60

Partajare funcții între componente Vue.js

În aplicația am o mulțime de funcții utilitatere care fac diferite lucruri, de la analiza șirurilor până la realizarea toastelor și așa mai departe.
Întrebarea mea este cum le accesez în alte fișiere .vue? Nu vreau să rescriu aceste funcții pentru fiecare componentă Vue nouă pe care o scriu.
Voi putea să le folosesc importând o componentă în alta? (Vue vrea sa adaug componenta în template, ceea ce înseamnă că nu pot importa doar acel JavaScript).
Dacă da, care este modalitatea standard de a face acest lucru?

MarPlo Mesaje:4343
Pentru asta poți utiliza Mixins.
1. Importa componenta de care ai nevoie.
2. adăuga un mixin array ca mai jos în componenta ta, chiar deasupra zonei de date (sau undei posibil):

Cod: Selectaţi tot

mixins:[yourimportedcomponent], data:...
Apeleaza metoda dorita folosind:

Cod: Selectaţi tot

this.theMethodYouWant();
Mai multe poți găsi aici: Vue Mixins

Sau:
Pune-le pe toate într-un modul comune, 'src/utils.js', apoi fiecare componentă Vue poate importa după cum este necesar:

Cod: Selectaţi tot

// src/utils.js
const funcA = () => {
  console.log('funcA');
}

const funcB = () => {
  console.log('funcB');
}

export { funcA, funcB }
Apoi, in fisierele .vue:

Cod: Selectaţi tot

// VueComponentA.vue
import { funcA } from 'path/to/utils';

// VueComponentB.vue
import { funcB } from 'path/to/utils';

Subiecte similare