Vue2 根据数据创建组件

Question

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

模板
数据
方法 - 可能有几种方法

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

我尝试生成 return 结果，如：

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

并编译上面的代码：

axios.get("/api/GetResult")
    .then(response => {
        comp1 = response.data;
        const compiled = Vue.compile(comp1);
        Vue.component('result-component', compiled);
    })
    .catch(error => console.log(error))

我在 Vue.compile(comp1) -

上出错

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

提前致谢

Answer 1

你的 Api 应该 return 一个 JSON 每个属性 Vue 组件（名称，数据，模板，方法）需要的，注意方法需要被转换成一个实际的 js 函数（检查 docs 关于那个）

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  data() {
    return {
      apiComponent: { template: '<div>Loading!</div>' }
    };
  },
  methods: {
    loadApiComponent() {
      setTimeout(() => {
        this.buildApiComponent(JSON.parse('{"name":"test-component14","template":"<div><input type=\\"button\\" v-on:click=\\"changeName\\" value=\\"Click me 14\\" /><h1>{{msg}}</h1></div>","data":{"msg":"Test Componet 14 "},"methods":[{"name":"changeName","body":"{this.msg = \\"mouse clicked 14\\";}"}]}'));
      }, 2000);
    },
    buildApiComponent(compObject) {
      const {
        name,
        template,
        data,
        methods
      } = compObject;

      const compiledTemplate = Vue.compile(template);

      this.apiComponent = {
        ...compiledTemplate,
        name,
        data() {
          return { ...data
          }
        },
        methods: methods.reduce((c, n) => {
          c[n.name] = new Function(n.body);
          return c;
        }, {})
      };
    }
  },
  mounted() {
    this.loadApiComponent();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <component :is="apiComponent" />
</div>

Vue2 根据数据创建组件

Vue2 create component based on data

async-components

vuejs2

vue-dynamic-components