VueJS 2 - 如何使用$ emit传递参数

Question

我正在使用VueJS 2处理模态组件.现在,它基本上可以工作 - 我点击一个按钮,模态打开,等等.

我现在要做的是为模态创建一个唯一的名称,并将该按钮与该特定按钮相关联.

这就是我的想法.模态具有唯一的名称属性:

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

这将是关联按钮:

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

我需要弄清楚的是如何将showModal的参数传递给模态组件.

这是我在root vue实例中使用的方法(即,不在我的模态组件中):

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

我想要做的是访问组件中的name属性 - 如下所示:

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

但这显示为undefined.

那么我做错了什么？如何访问模态组件中的name属性？

注意:如果您想知道this.bus.$ on是什么,请参阅我之前提出的问题的以下答案:https://stackoverflow.com/a/42983494/7477670

Answer 1

将其作为参数传递给$emit.

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

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

此外,如果要为模态指定名称,则需要将其作为模态组件中的prop进行接受.

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

然后我假设你会想做点什么,

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