vue动态组件，不同的组件有不同的props，如何设置？

Question

要实现的功能：通过服务器读取数据库内设置信息，前台根据信息动态组成需要的vue组件，这些组件有不同的props、事件等，当组件变化是，如何动态设置props和事件？

Answer 1

刚好这两天遇到同样的问题，仔细查了一下文档发现 动态组件 和 传入一个对象的所有属性 这两个点应该可以解决你的问题，关键代码实现如下

// template部分
component(
    v-bind:is="someCondition",
    v-bind="curProps")

// script部分(ts)
private someCondition: boolean = true

get curComponent() {
  return this.someCondition
    /** 组件One */
    ? CompOne
    /** 组件Two */
    : CompTwo;
}

get curProps() {
  return this.someCondition
    ? {
      prop1: '我是组件One所需的第一个prop属性',
      prop2: '我是组件One所需的第二个prop属性',
    }
    : {
      prop3: '我是组件Two所需的第一个prop属性',
    };
}

整体思路就是：
通过动态变量的方式将，props通过对象的方式传递过去，每个对象里只传递组件对应所需要的属性

Answer 2

//html 部分
    <!-- 父组件模板-->
    <div id = "page">
        <keep-alive>
        <component :is="组件名" :参数1="参数1" :参数2="参数2"></component>
        </keep-alive>
    </div>
    <!-- 组件1模板-->
    <script type="text/x-template" id="组件1">
        <div>.....</div>
    <script>
    
    <!-- 组件2模板-->
    <script type="text/x-template" id="组件2">
        <div>.....</div>
    <script>

//js 部分
    //组件1实例
    Vue.component('组件1', {
        template: '#组件1',
        props: {
            参数1: Number,
            参数2: Object
        },
        data: function() {
            return {
                a: ''
            };
        },
        methods: {}
    })
    
    //组件2实例
    Vue.component('组件2', {
        template: '#组件2',
        props: {
            参数1: Number,
            参数2: Object
        },
        data: function() {
            return {
                a: ''
            };
        },
        methods: {}
    })
    //父组件实例
     new Vue({
        el: '#page',
        data: {
            组件名: '组件1', //动态更换，（由事件触发等）
            a:123
        },
        methods: {
            //改变 this.组件名
        }
    })        

Answer 3

属性可以，但是事件呢。。子组件的emit