Question

我正在学习使用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的新手并且除了文档之外没有太多信息，我认为这些文档在相同部分有点令人困惑。

Answer 1

如果我理解正确，为了实现您的目标，您可以使用module bundler Rollup或webpack与他们各自的Svelte plugin和loader。从这个角度来看，最简单的方法是使用基于one或the other的模板。

将多个组件加载到js文件，但只使用所需的组件

1 个答案: