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

Question

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

- Moshe

Answer 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

- Bert

Answer 2

<!-- File name is dataTable.vue -->
<template>
  <div>
     <insertForm v-on:emitForm="close"></insertForm>
  </div>
</template>


<script>

import InsertForm from "./insertForm";

import Axios from "axios";

export default {
  components: {
    InsertForm
  },

  data: () => ({    
  }),

  methods: {
    
    close(res) {
      console.log('res = ', res);    
    }
  }
};
</script>

<!-- File name is insertForm.vue -->
<template>
  <div>
    <v-btn @click.native="sendPrameter">
      <v-icon>save</v-icon>
    </v-btn>
  </div>
</template>

<script>
export default {
  data: () => ({
   mesage:{
    msg:"Saved successfully",
    color:'red',
    status:1
  }
}), 

  methods: {
    sendPrameter: function() {      
      this.$emit("emitForm", this.mesage);
    }
  }
};
</script>

https://vuejs.org/v2/guide/components-custom-events.html

- Bulbul Sarker