首页 文章

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

提问于
浏览 次
14

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

javascript vue.js vuejs2 vue-component

1 回答

  • 22

    将其作为参数传递给 $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
    回复于

相关问题