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

JavaScript

宝儿Near

2020-03-12

我正在使用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

第1237篇《VueJS 2-如何使用$ emit传递参数》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
Winter 2020.03.12

传参只需要后面带你相传的参数,例如this.$emit("showModal", "hello")搞定。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android