时间戳

首页 > 解决方案 > 仅使用字符串实例化 Vue 组件

vue.js - 仅使用字符串实例化 Vue 组件

问题描述

我有一个字符串保存为 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.jsvue-component

解决方案

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

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

推荐阅读