Vuejs2 Vue2基于数据创建组件

我想基于ajax api响应或数据创建一个组件，包括：

模板

资料

方法-可能有几种方法

备注：响应或数据是动态的，不保存在文件中

我尝试生成并返回如下结果：

<script>
        Vue.component('test-component14', {
            template: '<div><input type="button" v-on:click="changeName" value="Click me 14" /><h1>{{msg}}</h1></div>',
            data: function () {
                return {
                    msg: "Test Componet 14 "
                }
            },
            methods: {
                changeName: function () {
                    this.msg = "mouse clicked 14";
                },
            }
        });

</script>

我在

Vue.compile（comp1）

-

• 模板应该只负责将状态映射到UI。避免在模板中放置带有副作用的标记，例如 ，因为它们不会被解析

---

提前感谢

您的Api应该返回一个JSON，其中包含Vue组件所需的每个属性（名称、数据、模板、方法），请注意，方法需要转换为实际的js函数（请检查）

Vue.config.productionTip=false；
Vue.config.devtools=false；
新Vue({
el:“#应用程序”，
数据（）{
返回{
apiComponent:{template:'Loading！'}
};
},
方法：{
LoadApicComponent（）{
设置超时（（）=>{
this.buildApiComponent（JSON.parse（{“name”：“test-component14”，“template”：“{msg}}”，“data”：{“msg”：“testcomponet14”}，“methods”：[{“name”：“changeName”，“body”：“{this.msg=\\\\\\\”鼠标点击14\\\\\”；}]}”）；
}, 2000);
},
BuildApicComponent（组件对象）{
常数{
名称
模板，
数据，
方法
}=组合对象；
const compiledTemplate=Vue.compile（模板）；
this.apiComponent={
…编译模板，
名称
数据（）{
返回{…数据
}
},
方法：方法.reduce（（c，n）=>{
c[n.name]=新函数（n.body）；
返回c；
}, {})
};
}
},
安装的（）{
this.loadApiComponent（）；
}
});

api/GetResult返回了什么？返回是代码的第一部分-
Vue.component（'test-component14'，{…
这是一个完整的组件。谢谢。看起来不错。我只是好奇是否可以返回Vue SFC或Vue.component脚本？我想你可以看看（服务器端渲染）
axios.get("/api/GetResult")
    .then(response => {
        comp1 = response.data;
        const compiled = Vue.compile(comp1);
        Vue.component('result-component', compiled);
    })
    .catch(error => console.log(error))