Pagina 1 din 1

Partajare funcții între componente Vue.js

Scris: Mar Dec 01, 2020
de Marius
Î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?

Partajare funcții între componente Vue.js

Scris: Mar Dec 01, 2020
de MarPlo
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';