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));
}

另外，如果你想给模态一个名字，你需要在模态组件中接受它作为道具。

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

然后我假设你想要做类似的事情，

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

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

VueJS 2 - 如何使用$ emit

2 个答案: