javascript - 在 vue.js 中使用动态组件

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 来实现此行为。

父级:

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

创建组件:

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