VueJS2 상위 구성 요소로 이벤트를 동적으로 내보내는 방법

VueJS2 상위 구성 요소로 이벤트를 동적으로 내보내는 방법

부모 구성 요소의 방법에 이벤트를 동적으로 내보내야 하는 제목처럼, 나는 이렇게 구성된 구성 요소를 가지고 있다.

<TableComponent 
  :actionmenus="actionmenus"
  @edit="parenteditmethod"
  @delete="parentdeletemethod">
</TableComponent>

여기 액션메누스 사물이 있다.

actionmenus: [
  {title: 'Edit', emitevent: 'edit'},
  {title: 'Delete', emitevent: 'delete'}
]

그리고 여기 내 테이블 구성 요소의 조각이 있다.

...
<ul>
  <li v-for="menu in actionmenus"><a @click="$emit(menu.emitevent)" class="text-menu">{{ menu.title }}</a></li>
</ul>
...

나는 이것이 쉽게 이루어져야 한다는 것을 안다.$emit('edit')또는$emit('delete')액션 메누스 사물을 사용하지 않고$emit()부품은 다른 경우에 테이블 구성요소를 재사용할 수 있도록 전달된 배열 동작 메뉴에 기초하여 동적이어야 한다.어떻게 접근해야 할까?무슨 방법이 없을까?

내가 아는 바로는, 당신은 아이 구성 요소에서 부모에게 이벤트를 내보내고, 방출 요소와 함께 일부 데이터를 전달하고 싶어 한다(그렇지 않다면 미안하다).

아시다시피 다음과 같은 자식 구성 요소에서 이벤트를 내보낼 수 있다.

$emit("EVENT");

그리고 이렇게 부모에게서 잡아라:

<childTag v-on:EVENT="parentFunction"></childTag>

다음과 같은 방법으로 자녀로부터 부모에게 데이터를 전달할 수도 있다.

$emit("EVENT",DATA);

그리고 이와 같은 상위 함수의 데이터를 포착한다.

<childTag v-on:EVENT="parentFunction"></childTag>
...
methods{
  parentFunction(DATA){
    //Handle the DATA object from the child
  }
}

이것이 도움이 되길 바라며 행운을 빈다!

@codincat이 옳다, 모든 것이 통한다.그것은 Vue3에게도 해당된다.

const rootComponent = {
  el: "#app",
  data: function () {
    return {
      actionmenus: [
        { title: "Edit", emitevent: "edit" },
        { title: "Delete", emitevent: "delete" }
      ]
    };
  },
  methods: {
    parenteditmethod() {
      console.log("edit");
    },
    parentdeletemethod() {
      console.log("delete");
    }
  }
};

const app = Vue.createApp(rootComponent);
app.component("table-component", {
  props: { actionmenus: Array },
  template: `
    <ul>
      <li v-for="menu in actionmenus">
        <a @click="$emit(menu.emitevent)" class="text-menu">{{ menu.title }}</a>
      </li>
    </ul>`
});

const rootComponentInstance = app.mount("#app");

<!-- https://stackoverflow.com/questions/43750969/vuejs2-how-to-dynamically-emit-event-to-parent-component -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.29/vue.global.min.js"></script>

<div id="app">
  <table-component :actionmenus="actionmenus" @edit="parenteditmethod" @delete="parentdeletemethod">
  </table-component>
</div>

참조URL: https://stackoverflow.com/questions/43750969/vuejs2-how-to-dynamically-emit-event-to-parent-component