Question

我正在尝试将单个自包含的HTML文件作为沙盒迷你应用程序加载到我的Vue.js应用程序中，然后我希望将其转换为隔离的组件，其中加载的文件中的任何代码都不会干扰Vue应用程序代码，反之亦然-有点像Vue的范围样式，但不仅是样式-还有标记和功能。

这些独立的HTML文件背后的想法是，某人应该能够编写一个.html文件，其中包含所有样式（在<head>中）和功能（在{{ 1}}）并将其加载到服务器上，然后我的Vue应用程序将从中将这些文件拉出并呈现为页面上的组件，但重要的部分是应该能够编写HTML组件文件您想要的。例如，我应该能够编写HTML / CSS / Vanilla.js或HTML / CSS / Jquery等。基本上，它应该像iframe一样起作用，但作为Vue.js组件，如果这样做的话有道理吗？

这是我尝试过的：

自包含的单页HTML文件

<script>

main.js
这部分似乎运行良好（即不会引发任何错误）。

<!-- 
To get this code, my Vue app does an asynchronous GET call to localhost:3000/test,
which returns this file as a string. but in practice, it won't really matter where 
the file comes from.
        -->
<html>
    <head>
        <title></title>
        <script src="url-to-jquery-cdn" crossorigin="anonymous"></script>
    </head>
    <body>
        <p>External Component 1. Wooo!</p>

        <button onclick="serverCall()">Server Call!</button>

        <script>
            function serverCall() {
                console.log('Bam!');

                $.ajax({
                    type: 'POST',
                    url: 'http://localhost:3000/test',
                    success: data => {
                        console.log('success!', data);
                    }
                });
            }
        </script>
    </body>
</html>

App.vue
但是麻烦在这里发生

// ...
Vue.component('external-component', function(resolve, reject) {
    Vue.http.get('http://localhost:3000/test').then(data => {
        const doc = new DOMParser().parseFromString(data.body, 'text/html');
        resolve({
          template: doc
        });
    }).catch(err => {
        console.log('err:', err);
    });
});
// ...

将组件标签添加到<template> <div class="home"> <external-component></external-component> </div> </template> <script> export default {} </script>文件中后，它会引发以下两个错误：

.vue

如果有人可以建议我如何实现这种功能，我将不胜感激。我也乐于接受完全改变范例或什至根本不包含Vue.js的建议。

异步加载的沙盒组件

0 个答案: