我正在使用VueJS 2开发一个模态组件。目前,它基本上是工作的——我点击按钮,模态框就会打开等等。
现在,我想给模态框创建一个唯一的名称,并将该按钮与特定的模态框关联起来。
这就是我想象中的样子。模态框具有唯一名称属性:
<modal name='myName'>内容</modal>
这将是相关联的按钮:
<button @click="showModal('myName')"></button>
我需要弄清楚的是如何将showModal的参数传递给模态组件。
以下是我在根Vue实例中使用的方法(即不在我的模态框组件内):
methods: {
showModal(name) { this.bus.$emit('showModal'); },
}
我想要做的是访问组件中的名称属性 -- 就像这样:created() {
this.bus.$on('showModal', () => alert(this.name));
}
但是这会显示为undefined
。
那么我做错了什么?如何在模态组件内访问名称属性?
注意:如果您想知道这里的this.bus.$on是什么,请参阅我之前提出的问题的以下答案:https://stackoverflow.com/a/42983494/7477670