VueJS 2How przekazać parametry Korzystanie $ emitują

Question

pracuję na komponencie modalnej z wykorzystaniem VueJS 2. Prawo teraz, to w zasadzie działa - klikam na przycisk i modalna otwiera itd

Co chcę Zrób teraz unikalną nazwę modalu i powiąż przycisk z tym konkretnym przyciskiem.

Oto, co mam na myśli. Modalna ma unikalną właściwość name:

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

I to byłoby przycisk współpracownik:

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

Co muszę dowiedzieć się jak przekazać parametr showModal do składnik modalny.

Oto metoda, która używam w głównym instancji vue (czyli nie w moim modalnej składnika):

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

Co chcę zrobić, to aby uzyskać dostęp do właściwości name w składniku - - coś takiego:

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

Ale to pokazuje się jako undefined.

Co więc robię źle? Jak uzyskać dostęp do właściwości name w komponencie modalnym?

. UWAGA: Jeśli zastanawiasz się co this.bus $ ON, odwiedź następującą odpowiedź na poprzednie pytanie, które zadałem: https://stackoverflow.com/a/42983494/7477670

Answer 1

przekazać go jako parametr do $emit.

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

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

Ponadto, jeśli chcesz nadać modalowi nazwę, musisz zaakceptować ją jako podpór w składniku modalnym.

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

Potem zakładamy, będziemy chcieli, aby zrobić coś podobnego,

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