web-dev-qa-db-fra.com

VueJS 2 - Comment passer des paramètres en utilisant $ emit

Je travaille sur un composant modal à l'aide de VueJS 2. Pour le moment, cela fonctionne essentiellement - je clique sur un bouton et le modal s'ouvre, etc.

Ce que je veux faire maintenant, c'est créer un nom unique pour le modal et associer le bouton à ce bouton particulier.

Voilà ce que je pense. Le modal a une propriété de nom unique:

<modal name='myName'>CONTENT</modal>

Et ce serait le bouton associé:

<button @click="showModal('myName')"></button>

Ce que je dois comprendre, c'est comment passer le paramètre de showModal au composant modal.

Voici la méthode que j'utilise dans l'instance racine vue (c'est-à-dire PAS à l'intérieur de mon composant modal):

methods: {
    showModal(name) { this.bus.$emit('showModal'); },
}

Ce que je veux faire, c'est accéder à la propriété name dans le composant - quelque chose comme ceci:

created() {
    this.bus.$on('showModal', () => alert(this.name));
}

Mais cela apparaît comme undefined.

Alors qu'est-ce que je fais mal? Comment puis-je accéder à la propriété name à l'intérieur du composant modal?

REMARQUE: si vous vous demandez ce qu'est this.bus. $ On, consultez la réponse suivante à une question précédente que j'ai posée: https://stackoverflow.com/a/42983494/747767

javascriptvue.jsvuejs2vue-component
21
Moshe

Passez-le comme paramètre à $emit.

methods: {
    showModal(name) { this.bus.$emit('showModal', name); },
}

created() {
    this.bus.$on('showModal', (name) => alert(name));
}

De plus, si vous voulez donner un nom au modal, vous devez l'accepter comme accessoire dans le composant modal.

Vue.component("modal",{
    props:["name"],
    ...
})

Ensuite, je suppose que vous voudrez faire quelque chose comme,

if (name == this.name)
    //show the modal
27
Bert