VueJ 2 - $emit을 사용한 파라미터 전달 방법

VueJ 2 - $emit을 사용한 파라미터 전달 방법

VueJs 2를 사용하여 모달 컴포넌트를 만들고 있습니다.현재 기본적으로 동작하고 있습니다.버튼을 클릭하면 모달 등이 열립니다.

이제 모달의 고유한 이름을 만들고 버튼을 특정 버튼과 연관짓습니다.

이것이 내가 생각하고 있는 것이다.모달에는 고유한 이름 속성이 있습니다.

<modal name='myName'>CONTENT</modal>

그리고 이것이 연관 버튼입니다.

<button @click="showModal('myName')"></button>

showModal의 파라미터를 modal 컴포넌트에 전달하는 방법을 알아내야 합니다.

루트 vue 인스턴스에서 사용하는 메서드는 다음과 같습니다(모달 컴포넌트 내부가 아님).

methods: {
    showModal(name) { this.bus.$emit('showModal'); },
}

컴포넌트의 이름 속성에 액세스 하고 싶은 것은 다음과 같습니다.

created() {
    this.bus.$on('showModal', () => alert(this.name));
}

근데 이게...undefined.

그럼 내가 뭘 잘못하고 있는 거지?모달 컴포넌트 내의 이름 속성에 액세스하려면 어떻게 해야 합니까?

메모: 이 . bus가 궁금하신 경우$on은 이전 질문의 답변을 참조하십시오.https://stackoverflow.com/a/42983494/7477670

매개 변수로 전달:$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

<!-- 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

언급URL : https://stackoverflow.com/questions/42986380/vuejs-2-how-to-pass-parameters-using-emit