Les accessoires peuvent-ils transmettre des fonctions dans vue ?

Les accessoires dans vue peuvent transmettre des fonctions ; les chaînes, les tableaux, les nombres et les objets peuvent être transmis comme accessoires dans vue. Le but est de recevoir des données transmises de l'extérieur. la syntaxe est "export default {methods : {myFunction() {// ...}}} ;".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version Vue3, ordinateur Dell G3.

fonction de transfert d'accessoires dans vue

Vue est une question courante que les débutants posent souvent. Les chaînes, tableaux, nombres et objets peuvent être transmis en tant que props. Mais pouvez-vous passer une fonction en tant que props ? props传递。但是你能把一个函数当作一个props来传递吗?

虽然可以将函数作为props

Bien qu'il soit possible de passer une fonction en tant que props, ce n'est pas bon. Au contraire, Vue dispose d'une fonctionnalité spécialement conçue pour résoudre ce problème, examinons-la ensuite.

Passage de fonctions dans des composants

Il est relativement simple d'obtenir une fonction ou une méthode et de la transmettre comme accessoire à un composant enfant. En fait, cela fonctionne exactement de la même manière que passer n'importe quelle autre variable :

<template>
  <ChildComponent :function="myFunction" />
</template>

export default {
  methods: {
    myFunction() {
      // ...
    }
  }
};

Comme dit précédemment, vous ne devriez jamais faire quelque chose comme ça dans Vue.

Pourquoi ? Vue a quelque chose de mieux.

React vs Vue

Si vous avez utilisé React, vous serez habitué à passer des fonctions.

Dans React, nous pouvons passer une fonction du composant parent au composant enfant afin que le composant enfant puisse communiquer vers le haut avec le composant parent. Les accessoires et les données circulent vers le bas, les appels de fonction circulent vers le haut.

Cependant, Vue dispose d'un mécanisme différent pour implémenter la communication enfant-parent, Vue utilise des événements.

C'est de la même manière que fonctionne le DOM - la méthode de Vue est plus cohérente avec les navigateurs que celle de React. Les éléments peuvent émettre des événements et écouter ces événements.

Ainsi, bien qu'il soit possible de passer des fonctions comme accessoires dans Vue, cela est considéré comme un anti-modèle.

Utilisation des événements

Les événements sont la façon dont nous communiquons avec les composants parents dans Vue.

Voici un court exemple pour illustrer le fonctionnement des événements.

Nous allons d'abord créer le composant enfant qui, une fois créé, émet un événement :

// ChildComponent
export default {
  created() {
    this.$emit('created');
  }
}

Dans le composant parent, nous écoutons l'événement :

<template>
  <ChildComponent @created="handleCreate" />
</template>

export default {
  methods: {
    handleCreate() {
      console.log(&#39;Child has been created.&#39;);
    }
  }
};

Il y a beaucoup plus de choses que vous pouvez faire avec les événements et ce n'est que de la fourrure. Il est fortement recommandé de consulter la documentation officielle de Vue pour en savoir plus, cela vaut vraiment la peine d'être lu.

Mais les événements ne peuvent pas résoudre complètement tous nos problèmes.

Accéder aux données dans la portée du composant parent à partir du composant enfant

Dans de nombreux cas, le problème que nous essayons de résoudre consiste à accéder aux données de différentes portées.

Le composant parent a une portée et le composant enfant a une autre portée.

Habituellement, nous souhaitons accéder à la valeur du composant enfant à partir du composant parent, ou accéder à la valeur du composant parent à partir du composant enfant. Vue nous empêche de le faire directement, ce qui est une bonne chose.

Cela rend nos composants plus encapsulés et augmente leur réutilisation. Cela rend notre code plus propre et évite bien des maux de tête à long terme.

Mais parfois, nous pouvons essayer de contourner ce problème via des fonctions.

「Obtenir la valeur de la classe parent」

Si vous souhaitez que le composant enfant accède à la méthode du composant parent, alors il semble simple et direct de passer la méthode directement en tant qu'accessoire.

Dans le composant parent, nous ferions ceci :

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod() {
      // ...
    }
  }
}

Dans notre composant enfant, utilisez la méthode transmise :

// Child
export default {
  props: {
    method: { type: Function },
  },
  mounted() {
    // Use the parent function directly here
    this.method();
  }
}

Quel serait le problème en faisant cela ?

Ce n'est pas complètement faux, mais il vaudrait mieux utiliser les événements dans ce cas.

Ensuite, en cas de besoin, le composant enfant n'appelle pas la fonction mais émet simplement un événement. Le composant parent recevra alors l'événement, appellera la fonction et l'assembly mettra à jour le accessoire transmis au composant enfant.

C'est une meilleure façon d'obtenir le même effet.

Dans d'autres cas, nous pouvons vouloir obtenir une valeur d'un élément enfant vers l'élément parent, et nous utilisons une fonction pour cela.

Par exemple, vous pourriez faire ceci. La fonction parent accepte la valeur de la fonction enfant et la traite :

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod(valueFromChild) {
      // Do something with the value
      console.log(&#39;From the child:&#39;, valueFromChild);
    }
  }
}

Appeler la méthode passée dans le composant enfant et passer la valeur du composant enfant en paramètre de la méthode :

// Child
export default {
  props: {
    method: { type: Function },
  },
  data() {
    return { value: 'I am the child.' };
  },
  mounted() {
    // Pass a value to the parent through the function
    this.method(this.value);
  }
}

Ce n'est pas complètement faux, faire cela est faisable.

Ce n'est tout simplement pas la meilleure façon de le faire dans Vue. Au lieu de cela, les événements sont mieux adaptés pour résoudre le problème. Nous pouvons réaliser exactement la même chose en utilisant des événements

<!-- Parent -->
<template>
  <ChildComponent @send-message="handleSendMessage" />
</template>

// Parent
export default {
  methods: {
    handleSendMessage(event, value) {
      // Our event handler gets the event, as well as any
      // arguments the child passes to the event
      console.log(&#39;From the child:&#39;, value);
    }
  }
}

Dans les composants enfants, nous émettons des événements :

// Child
export default {
  props: {
    method: { type: Function },
  },
  data() {
    return { value: 'I am the child.' };
  },
  mounted() {
    // Instead of calling the method we emit an event
    this.$emit('send-message', this.value);
  }
}

Les événements sont très utiles dans Vue, mais ils ne résolvent pas non plus notre problème à 100 %. Parfois, nous devons accéder à la portée de l'enfant depuis le parent d'une manière différente.

Pour cela nous utilisons des slots scoped !

Utiliser les emplacements Scope

Les emplacements Scope sont un sujet plus avancé, mais ils sont également très utiles. En fait, je pense qu'il s'agit de l'une des fonctionnalités les plus puissantes que Vue puisse offrir.

Ils affaiblissent la frontière entre le périmètre enfant et le périmètre parent. Mais cela est fait de manière très propre, rendant nos composants aussi composables qu'avant.

Si vous souhaitez en savoir plus sur le fonctionnement des slots de scope, vous pouvez d'abord lire la documentation officielle, ou nous vous l'expliquerons la prochaine fois. 🎜

【Recommandation associée : "Tutoriel vue.js"】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!