Question

我有一个简单的应用程序需要动态呈现2个组件。

组件A - 需要有onClick事件。
组件B - 需要具有onChange事件。

如何将不同的事件动态附加到组件A / B？

<template>
  <component v-bind:is="currentView">
  </component>
</template>

<script>
import A from '../components/a.vue'
import B from '../components/b.vue'

export default {
  data: function () {
    return {
      currentView: A
    }
  },
  components: { A, B }
}
</script>

Answer 1

这是一个更复杂和更现实的用例的解决方案。在此用例中，您必须使用v-for呈现多个不同的组件。

父组件将组件数组传递给create-components。 create-components将在此数组上使用v-for，并使用正确的事件显示所有这些组件。

我使用自定义指令custom-events来实现此行为。

parent：

<template>
    <div class="parent">
        <create-components :components="components"></create-components>
    </div>
</template>

<script>
import CreateComponents from '@/components/CreateComponents'
import ComponentA from '@/components/ComponentA'
import ComponentB from '@/components/ComponentB'

export default {
    name: 'parent',
    data() {
        return {
            components: [
                {
                    is: ComponentA,
                    events: {
                        "change":this.componentA_onChange.bind(this)
                    }
                },
                {
                    is: ComponentB,
                    events: {
                        "click":this.componentB_onClick.bind(this)
                    }
                }
            ]
        }
    },
    methods: {
        componentA_onChange() {
            alert('componentA_onChange');
        },
        componentB_onClick() {
            alert('componentB_onClick');
        }
    },
    components: { CreateComponents }
};
</script>

create-components：

<template>
    <div class="create-components">
        <div v-for="(component, componentIndex) in components">
            <component v-bind:is="component.is" v-custom-events="component.events"></component>
        </div>
    </div>
</template>

<script>
export default {
    name: 'create-components',
    props: {
        components: {
            type: Array
        }
    },
    directives: {
        CustomEvents: {
            bind: function (el, binding, vnode) {
                let allEvents = binding.value;
                if(typeof allEvents !== "undefined"){
                    let allEventsName = Object.keys(binding.value);
                    allEventsName.forEach(function(event) {
                        vnode.componentInstance.$on(event, (eventData) => {
                            allEvents[event](eventData);
                        });
                    });
                }
            },
            unbind: function (el, binding, vnode) {
                vnode.componentInstance.$off();
            }
        }
    }
  }
</script>

Answer 2

您不必动态添加它们。

<component v-bind:is="currentView" @click="onClick" @change="onChange">

如果你想小心，你可以在currentView的处理程序中保释不正确。

methods: {
  onClick(){
    if (this.currentView != A) return
    // handle click
  },
  onChange(){
    if (this.currentView != B) return
    // handle change
  }
}

在vue.js中使用动态组件

2 个答案: