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><template>
<p class="btn" @click="handleClick"><slot></slot></p>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('clickTest')
}
}
}
</script>
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
}: clickTest : Array(1) 0 : ƒ invoker() length :
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)
)
)
)
}<Button key="1" v-if="disabled" @clickTest="handleClick">可点击</Button> <Button key="2" v-else>不可点击</Button>
<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!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
