主页 / 问题 / 930960
Accepted
Дмытрык
Asked:2020-01-11 20:08:56 +0000 UTC2020-01-11 20:08:56 +0000 UTC

按条件挂断几个不同的事件。Vue.js

  • 772

假设组件的名称来自服务器，我们必须显示它。以下是这个问题的方法：如何根据服务器的响应加载组件？

我们有一个模板可以做到这一点。

<template>
  <main class="main">
    <component :is="used_component" :data="component_data"></component>
  </main>
</template>

在实践中，这些组件中的每一个都可以发出一堆我们需要订阅的不同自定义事件。它看起来像这样

<template>
   <main class="main">
      <component 
         :is="used_component" 
         :data="component_data"
         @customEvent_1="handler_1"
         @customEvent_2="handler_2"
         //и т.д
     >
     </component>
    </main>
 </template>

因此，事实证明，每个组件都将订阅所有可能生成的处理程序，包括使用的组件和未使用的组件。如何避免这种情况并按条件指定处理程序和事件？

vue.js

1 个回答

  1. Best Answer

    要解决此问题，您需要使用一种方法，该方法将返回事件及其处理程序的名称

    <template>
  <main class="main">
    <component 
     :is="used_component" 
     :data="component_data"
     v-on="getEvent(used_component)"
    ></component>
  </main>
</template>

<script>

export default {
methods: {
  getEvent(nameComponent) {
     if (nameComponent === "component_1") return { 'customEvent_1': this.handler_1 };
     if (nameComponent === "component_2") return { 'customEvent_2': this.handler_2 };
     return {}
   }
  }
};
</script>
    • 1

相关问题