仅使用字符串实例化 Vue 组件答案

【问题标题】：Instantiating Vue components using only string仅使用字符串实例化 Vue 组件
【发布时间】：2020-11-29 17:21:10
【问题描述】：

我有一个字符串保存为 javascript 中的变量，其中包含 <template> 和 <script> 标记，可以保存到 vue 中的单个文件组件中。这是一个例子：

<template>
    <div>
        {{myVar}}
        <button @click = "change(1)">Increment</button>
        <button @click = "change(-1)">Decrement</button>
    </div>
</template>

<script>
export default{
    data(){
        var randomVar = Math.round(10*Math.random());
        return {
            myVar: randomVar
        }
    },
    mounted(){
        this.change(12);
    },
    methods:{
        change(num){
            this.myVar += num;
        }
    }
};
</script>

有没有办法将所述字符串实例化为 vue 组件，而无需将其保存为单个文件组件或分离数据、方法和其他生命周期钩子？

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

HttpVueLoader 可以直接在浏览器中加载.vue 文件 - 您可以查看源代码并尝试修改它以直接接受字符串，而不是从 URL 中获取。

此外，您可能想查看Client-Side Vue 项目 - 它避免了 SFC 的构建步骤，因此您可以直接在浏览器中使用您的 .vue 组件。

【讨论】：