1

我正在学习使用 svelte 框架来制作组件。但是我无法从我加载到 js 文件中的组件中创建一个组件的实例。

所以，这是我的 html 文件：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
     </head>
     <body>
<script src="./build/ReviewPanelComponent.js"></script>
     </body>
 </html>

我的 js 输入文件（我在其中导入组件）：

import ReviewPanel from './ReviewPanel.html';

 const reviewPanel = new ReviewPanel({
      target: document.querySelector( 'body' ),
      data: 
        JSON.parse(localStorage.getItem('rooms'))

    });

      export default {
        components: {
            reviewPanel,
        }
    }

以及组件的 html：

<style>
#main{
    background-color:white;
}
h3,
h4,
h5{
    font-weight: bold;
}
</style>

<div class="container">
    <div class="row">
        <div id="main" class="col-xs-12">
            <div id="title">
                {{#if BookedRooms.length > 0}}
                    {{#each BookedRooms as br}}
                    <h3>{{br.Title}}</h3>
                        {{#each br.PossibleRateTypes as prt}}
                    <h4>{{prt.UUID}}</h4>

                        {{/each}}
                    {{/each}}
                {{/if}}             
            </div>
        </div>
    </div>
</div>

所以，此时，它加载了组件，因为它在 js 输入文件上有一个实例。问题是，此时，如果我想要第二个实例，我必须自己创建一个 js 文件。我的想法更像是在 js 文件和要使用它们的 html 文件中导入我想要的所有组件，我只会调用它们。

这可能吗。我一直在阅读文档，但没有找到我想要的。

编辑：我忘了说我也在使用 webpack。因此输入和输出文件。我设法使用了多个组件。我找到的解决方案是在我的 js 输入文件上执行此操作：

import ReviewPanel from './ReviewPanel.html';

 window.ReviewPanel=ReviewPanel;
 window.ReviewPanel2=ReviewPanel;

我将导入的对象放在一个全局变量中，这样我就可以在我想要的地方调用它，如下所示：

<div id="reviewPanel"></div>
<script type="text/javascript">
    // Creates the review panel component
    window.ReviewPanel = new ReviewPanel({
        target: document.querySelector('#reviewPanel'),
        data:
        JSON.parse(localStorage.getItem('rooms'))

    });
</script>

然而，虽然我有这个解决方案，但我的期望是在 js 输入文件中只导入一次，而不必依赖全局对象，然后在我需要的地方调用它，如下所示：

// And passing the parameters
<ReviewPanel />

虽然我在 React.js 上看到的不多，但我通常看到程序员这样做。我也有同样的期待。不过，由于我还有其他事情需要做，我暂时就这样搁置了，以后再优化。

尽管如此，如果有人知道如何做到这一点，我会全力以赴，因为我是 Svelte 的新手，除了文档之外没有太多关于它的信息，我认为这些文档在相同的部分有点混乱。

4

1 回答 1

0

如果我理解正确，为了实现您的目标，您可以使用诸如Rollup或webpack 之类的模块捆绑器以及它们各自的 Svelte插件和loader。从这个角度来看，最简单的开始方法是使用基于一个或另一个的模板。

于 2018-01-09T13:19:14.787 回答