Résoudre le problème de l'erreur UniApp : le chemin de liaison de l'événement du composant 'xxx' est incorrect

Avec l'application généralisée d'UniApp, de plus en plus de développeurs ont rencontré le problème du « chemin de liaison d'événement de composant incorrect » lors de l'utilisation de composants personnalisés. Ce problème est très courant dans le développement UniApp. De nombreuses personnes peuvent être confrontées à ce problème pendant un certain temps sans pouvoir le résoudre, ce qui provoque beaucoup de problèmes. Cet article discutera de la solution à ce problème.

Description du problème

Lors de l'utilisation de composants personnalisés, les événements de composants, tels que les événements de clic, etc. sont généralement utilisés. Par exemple, nous avons un composant personnalisé MyComponent. Nous utilisons ce composant dans la page et y lions un événement de clic. Le code est le suivant :

<template>
  <MyComponent @click="handleClick"></MyComponent>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('clicked');
    },
  },
};
</script>

Si le composant MyComponent ici est défini comme suit, une erreur sera signalée :

<template>
  <div>我是MyComponent组件</div>
</template>

<script>
export default {
  mounted() {
    console.log('MyComponent mounted');
  },
};
</script>

Message d'erreur

Le compilateur UniApp renverra le message d'erreur suivant :

事件绑定路径错误：Property or method "handleClick" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. (found in component <MyComponent>)

Analyse du problème

Cette erreur est due à une erreur dans le chemin de liaison de l'événement du composant, ce qui empêche l'événement d'être lié correctement. Les composants sont conçus pour être réutilisés dans diverses situations et présentent un certain degré d'abstraction. Si les événements internes du composant définissent trop de comportements, cela devient difficile à prédire et à gérer. Afin de maintenir la lisibilité et l'élégance du code, nous devons déplacer la fonction de gestion des événements vers l'extérieur et la gérer dans le composant parent.

Solution

La solution à ce problème est en fait très simple : déplacer la fonction de gestion des événements vers le composant parent. Modifions le code :

<template>
  <MyComponent @click="handleClick"></MyComponent>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('clicked');
    },
  },

  components: {
    MyComponent: {
      template: `
        <div>我是MyComponent组件</div>
      `,
    },
  },
};
</script>

Pour que l'événement puisse être lié avec succès.

Résumé

Ce qui précède est la méthode pour résoudre le problème de l'erreur de chemin de liaison d'événement de composant UniApp. Pour résumer, si vous utilisez un composant personnalisé mais que le problème de « l'erreur de chemin de liaison d'événement de composant » se produit, vous devrez peut-être le gérer. l'événement La fonction est déplacée vers le composant parent pour traitement. De cette façon, nous pouvons mieux encapsuler les composants et améliorer la maintenabilité du code.

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!