Forum : Accessibilité entre l'application et les élements importés

Hello,

Pour commencer, je souhaiterais faire en sorte que les méthodes et composants que j'importe dans mon applications puisse avoir accès aux propriétés et méthodes de l'application.

Le HTML contenu dans le template Vue :

<div id="app">
     <h1>{{ walterSay }}</h1>
     <div id="walter">
          <p><a href="#" @click="WalterSpeak">Walter Speak</a></p>
     </div>
    <button-counter />
</div>

Mon point d'entrée app.js :

import { createApp } from 'vue/dist/vue.esm-bundler';

import ButtonCounter from './ButtonCounter.vue'
import WalterSpeak from './walterSpeak.js';

const app = createApp({
  data() {
    return {
      walterSay: 'Hello !!'
    }
  },
  components: {
    ButtonCounter
  },
  methods: {
    WalterSpeak
  },
  mounted: function() {
    console.log('application chargée');
  }
}).mount('#app');

Ma méthode WalterSpeak définie dans le fichier walterSpeak.js :

export default function(event) {

  event.preventDefault();

  console.log(this.$parent);

  return false;
}

Ce que je veux

J'aimerais que ma méthode WalterSpeak puisse accéder à la propriété "walterSay", en Lecture et en Écriture.
Pour info, la propriété est bien exploitable car j'ai bien "Hello !!" qui est affiché dans le H1.

Ce que j'obtiens

Je n'arrive pas à accéder aux propriétés et méthodes de l'application.
La réponse retondante sur les internets : utiliser this.$parent
sauf que le console.log(this.$parent) retourne NULL.

Est-ce que l'un ou l'une d'entre vous saurait comment faire ?

Merci d'avance,

Mickaël

Soundboy39

Auteur

J'ai du neuf... en fait "this.$parent" fonctionne dans le cas d'un composant Vue, par contre, je voudrais trouver un moyen dans le cas d'une fonction Javascript importée en tant que module.

Pour l'instant, j'ai réussi à contourner le problème en ajoutant une méthode intermédiaire :

import { createApp } from 'vue/dist/vue.esm-bundler';

import ButtonCounter from './ButtonCounter.js'
import { WalterSpeak, ClickCount } from './WalterSpeak';

const app = createApp({
  data() {
    return {
      walterSay: 'Hello !!'
    }
  },
  components: {
    ButtonCounter
  },
  methods: {
    speak: function(event) {
      WalterSpeak(this, event);
    }
  }
}).mount('#app');

export function WalterSpeak(parent, event) {

  event.preventDefault();

  parent.walterSay = 'Bonjour';

  return false;
}

Apparament la valeur contenant l'instance est "passée en référence", du coup ça fonctionne, les propriétés de l'App parente sont accessibles en lecture et même en écriture.

Est-ce qu'il y a moyen de faire plus propre ?

Accessibilité entre l'application et les élements importés

1 réponse