Comment transmettre des événements dans les composants vue

Mon travail récent nécessite l'utilisation de Vue, donc celui avec lequel j'ai été en contact le plus récemment est Vue. Je vais maintenant vous présenter le transfert d'événements entre les composants Vue. Les amis qui en ont besoin peuvent s'y référer

Étant donné que le nouveau travail nécessite l'utilisation de Vue, celui auquel j'ai été exposé le plus récemment est Vue. Parce que j'ai déjà utilisé React, j'ai commencé à utiliser Vue très rapidement.

J'ai également essayé de trouver quelques similitudes et différences entre les deux. En plus de quelques méthodes auxiliaires supplémentaires, la plus grande différence devrait être que pour la communication entre les composants, il n'y a pas seulement des accessoires, mais aussi un événement. moniteur, qui peut être transmis entre les composants.

Cependant, dans vue2.+, vue a introduit l'algorithme diff et le dom virtuel pour améliorer l'efficacité. Nous savons ces choses. Afin de gérer les mises à jour fréquentes des éléments dom, nous proposons une solution d'optimisation. Y a-t-il un conflit entre les modifications et mises à jour fréquentes et l'initialisation des écouteurs d'événements ? Lorsque les composants doivent être modifiés, les événements enregistrés ne sont-ils pas liés ? ? Écrivons un code simple pour le vérifier.

Nous écrivons deux boutons réalisés par p, l'un est écrit en code html et l'autre est inséré sous la forme d'un composant. Les deux boutons sont exactement les mêmes, mais nous ajoutons un attribut désactivé à l'extérieur. couchez et passez if-else pour déterminer désactivé et afficher différents boutons (bien sûr, nous n'écrirons pas de code comme celui-ci dans des scénarios normaux, ici nous simulons simplement un scénario spécial de cette manière, et nous examinerons si ce scénario existe dans notre entreprise) .

<template>
 <p class="test">
 <p class="btn" v-if="disabled" @click="handleClick">可点击</p>
 <p class="btn" v-else >不可点击</p>
 <Button v-if="disabled" @clickTest="handleClick">可点击</Button>
 <Button v-else>不可点击</Button>
 </p>
</template>

<script>
import Button from &#39;./Button&#39;
export default {
 data () {
 return {
  disabled: true
 }
 },
 methods: {
 handleClick() {
  alert(&#39;可点击&#39;)
 }
 },
 components: {
 Button,
 },
 mounted() {
 setTimeout(() => {
  this.disabled = false
 }, 1000)
 }
}
</script>
<style>
.btn{
 margin: 100px auto;
 width: 200px;
 line-height: 50px;
 border: 1px solid #42b983;
 border-radius: 5px;
 color: #42b983;
}
</style>

Nous ajoutons un peu de style pour le rendre aussi beau que possible. Cela semble très simple. Deux boutons sont liés à un événement de clic lorsqu'ils sont cliquables, et non liés à eux lorsqu'ils ne le sont pas. cliquable. La différence est que l’un est du code HTML directement écrit et l’autre est un composant. Le code du composant est le suivant :

<template>
 <p class="btn" @click="handleClick"><slot></slot></p>
</template>
<script>
 export default {
  methods: {
   handleClick() {
    this.$emit(&#39;clickTest&#39;)
   }
  }
 }
</script>

Ensuite, ajoutez un settimeout de 1 seconde au cycle monté pour passer désactivé à faux, puis on le teste

Lorsque la désactivation est toujours vraie, une alerte cliquable apparaîtra lorsque vous cliquerez sur les deux boutons. Mais lorsque la désactivation devient false, celui écrit en HTML n'apparaîtra plus, mais celui écrit dans les composants ci-dessous apparaîtra toujours.

Il est très difficile de localiser ce genre de problème lorsqu'il survient, car le code n'appelle évidemment pas cet événement clicktest, et sur la page, on peut aussi déterminer Le le bouton est devenu impossible à cliquer. Alors pourquoi cet événement est-il toujours convoqué ?

Commençons par l'algorithme diff. La complexité de l'algorithme d'arbre de comparaison traditionnel est O(n^3). Lorsque React a introduit l'algorithme de comparaison, il a éliminé le mouvement entre niveaux, c'est-à-dire uniquement la comparaison. les similitudes et les différences des nœuds de même niveau réduisent la complexité de l'algorithme à O(n), ce qui nous permet de rafraîchir fréquemment la page entière sans retenue (bien sûr, avec modération).

(haha, pas d'image)

Diff a une stratégie selon laquelle deux composants avec la même classe généreront une structure arborescente similaire, et deux composants avec des classes différentes généreront une structure arborescente différente. Son ordre de comparaison est donc

1) différence d'arbre

2) différence de composant

3) différence d'élément

Retour à notre code, lorsque nous exécutons le composant diff, nous pensons que ce sont les mêmes composants, puis exécutons l'élément diff, c'est-à-dire ajoutons, supprimons et déplaçons. Le problème se produit donc ici lors de l'instanciation du composant, nous initialisons l'écouteur d'événement, mais lors du remplacement du même composant lors de la saisie. le DOM dans le composant, Vue n'a pas supprimé l'écouteur d'événements qui a été ajouté au composant.

Jetons un coup d'œil au code vue

Vue.prototype.$emit = function (event: string): Component {
 const vm: Component = this
 if (process.env.NODE_ENV !== 'production') {
  const lowerCaseEvent = event.toLowerCase()
  if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
  tip(
   `Event "${lowerCaseEvent}" is emitted in component ` +
   `${formatComponentName(vm)} but the handler is registered for "${event}". ` +
   `Note that HTML attributes are case-insensitive and you cannot use ` +
   `v-on to listen to camelCase events when using in-DOM templates. ` +
   `You should probably use "${hyphenate(event)}" instead of "${event}".`
  )
  }
 }
 let cbs = vm._events[event]
 if (cbs) {
  cbs = cbs.length > 1 ? toArray(cbs) : cbs
  const args = toArray(arguments, 1)
  for (let i = 0, l = cbs.length; i < l; i++) {
  try {
   cbs[i].apply(vm, args)
  } catch (e) {
   handleError(e, vm, `event handler for "${event}"`)
  }
  }
 }
 return vm
 }

vue détermine s'il y a des événements liés via l'attribut _events dans vdom. Nous examinons les _events

:
clickTest
:
Array(1)
0
:
ƒ invoker()
length
:

du bouton non cliquable et constatons que le test de clic est toujours là. C'est le problème.

Alors, comment devrions-nous éviter un tel problème ? Devrions-nous résoudre le problème via une comparaison différentielle ou regarder le code.

function sameVnode (a, b) {
 return (
 a.key === b.key && (
  (
  a.tag === b.tag &&
  a.isComment === b.isComment &&
  isDef(a.data) === isDef(b.data) &&
  sameInputType(a, b)
  ) || (
  isTrue(a.isAsyncPlaceholder) &&
  a.asyncFactory === b.asyncFactory &&
  isUndef(b.asyncFactory.error)
  )
 )
 )
}

C'est-à-dire que pour les différences, le soi-disant même premier principe de détermination est la clé.

key est également un attribut ajouté lorsque React a introduit diff. Il est utilisé pour déterminer si les arbres vdom avant et arrière sont des éléments unifiés (notez qu'il s'agit d'une relation fraternelle), il suffit donc d'ajouter une clé à. le code pour éviter ce problème

<Button key="1" v-if="disabled" @clickTest="handleClick">可点击</Button>
<Button key="2" v-else>不可点击</Button>

De cette façon, lorsque l'on clique sur le bouton, la boîte pop-up ne s'affichera plus.

key a un large éventail de fonctions. Lorsque nous parcourons le tableau pour générer du dom, l'ajout d'un identifiant unique déterminable (notez que l'index du tableau ne doit pas être utilisé) optimisera notre efficacité de comparaison et nécessitera moins d'opérations dom. Nous ajouterons également une clé à un p pour garantir qu'il ne sera pas restitué en raison de changements dans les éléments frères (ce type de p est généralement lié à des événements ou à des actions autres que réagir ou vue, comme la génération d'un canevas, etc. ).

Donc, outre l'ajout de cette valeur clé inutile au composant, existe-t-il un autre moyen de le résoudre ?

Oui, il existe une manière très anti-Vue mais de type réaction, qui consiste à transmettre l'événement de rappel via des accessoires, comme celui-ci,

<Button v-if="disabled" :clickTest="handleClick">可点击</Button>
<Button v-else>不可点击</Button>
  props: {
   &#39;clickTest&#39;: {
    type: Function
   }
  },
  methods: {
   handleClick() {
    //this.$emit(&#39;clickTest&#39;)
    this.clickTest && this.clickTest()
   }
  }

虽然vue给了我们更方便的事件传递的方式，但props里是允许我们去传递任何类型的，我的期望是在真实的dom上或者在公共组件的入口处以外的地方，都是通过props的方式来传递结果的。虽然这种方式很不vue，而且也享受不到v-on给我们带来的遍历，但是这样确实可以减少不必要的麻烦。

当然既然用了vue，更好的利用vue给我们带来的便利也很重要，所以对于这种很少会出现的麻烦，我们有一个预期，并可以快速定位并修复问题，就可以了。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue中如何通过v-for处理数组

使用vue如何实现收藏夹

在node.js中有关npm和webpack配置方法

如何通过js将当前时间格式化？

使用vue引入css,less相关问题

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!