Maison >interface Web >js tutoriel >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 './Button' export default { data () { return { disabled: true } }, methods: { handleClick() { alert('可点击') } }, 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('clickTest') } } } </script>Ensuite, ajoutez un settimeout de 1 seconde au cycle monté pour passer désactivé à faux, puis on le teste
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: { 'clickTest': { type: Function } }, methods: { handleClick() { //this.$emit('clickTest') this.clickTest && this.clickTest() } }
虽然vue给了我们更方便的事件传递的方式,但props里是允许我们去传递任何类型的,我的期望是在真实的dom上或者在公共组件的入口处以外的地方,都是通过props的方式来传递结果的。虽然这种方式很不vue,而且也享受不到v-on给我们带来的遍历,但是这样确实可以减少不必要的麻烦。
当然既然用了vue,更好的利用vue给我们带来的便利也很重要,所以对于这种很少会出现的麻烦,我们有一个预期,并可以快速定位并修复问题,就可以了。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
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!