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