VueJS 2 - Как передать параметры с помощью $emit

Я работаю над модальным компонентом, используя VueJS 2. Сейчас он в основном работает, я нажимаю на кнопку и открывается модальный, и т. д.

теперь я хочу создать уникальное имя для модального и связать кнопку с этой конкретной кнопкой.

это то, что я имею в виду. Модальный имеет уникальное свойство name:

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

и это будет ассоциированная кнопка:

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

что мне нужно выяснить, как передать параметр showModal модальному компоненту.

вот метод, который я использую в корневом экземпляре vue (i.e, не внутри моего модального компонента):

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

что я хочу сделать, это получить доступ к свойству name в компоненте - что-то вроде этого:

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

но это отображается как undefined.

так что я делаю не так? Как получить доступ к свойству name внутри модального компонент?

Примечание: Если вам интересно, что это.автобус.$on is, пожалуйста, см. следующий ответ на предыдущий вопрос, который я задал:https://stackoverflow.com/a/42983494/7477670

12
javascript vue-component vue.js vuejs2

1 ответов

передайте его как параметр в $emit.

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

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

кроме того, если вы хотите дать модальному имя, вам нужно принять его в качестве опоры в модальном компоненте.

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

тогда я предполагаю, что вы захотите сделать что-то вроде:

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