Question

据我所知，就像在许多前端框架中一样，Svelte 允许开发人员将逻辑分离成更小的、可重用的组件文件。这样做，您可以将 props 从父组件传递给子组件。

我想知道是否可以将 props 传递给根组件本身。我正在尝试使用 Svelte 创建一个模型，并且需要在 App.svelte 范围之外确定一些变量（即在导入 bundle.js 的同一级别分配的变量）

Answer 1

有两种主要方法可以做到这一点

向全局范围添加数据

这利用文档的全局范围在不同脚本之间共享值。它基本上归结为只是在 index.html 中声明一些东西，然后在任何你觉得合适的地方使用它。

<!-- index.html -->
<script>
  document.myapp = {
    name: 'Svelte'
  }
</script>
<script defer src="build/bundle.js"></script>

// main.js
const app = new App({
    target: document.body,
    props: {
        name: document.myapp.name
    }
});

我在这里使用 main.js 是因为我喜欢在我的应用程序中将所有外部非正式文件紧密地放在一起，但理论上您可以在任何地方使用 document.myapp.name，甚至可以作为商店的默认值

//store.js
export const name = readable(document.myapp.name)

您必须确保的一件事当然是在 svelte 应用程序运行之前初始化此对象（否则它只会未定义 甚至崩溃）

导出和调用应用

第二种方法是不直接在您的 main.js 中运行您的应用程序，而是让另一个脚本调用它。

// main.js
import App from './App.svelte'
export default App

<!-- index.html -->
<head>
    <script src='/build/bundle.js'></script>
</head>
<body>
    <script>
        new app({
            target: document.body,
            props: {
                name: 'from App'
            }
        })
    </script>
</body>

在这种情况下，确保脚本在页面加载后和包加载后运行很重要（这里我通过在 body 标签中添加脚本并删除 defer捆绑，我想有更好的方法来做到这一点）

此方法的另一个重要说明是您的应用程序名称不一定是您从 main.js 导出的名称，它在您的 rollup.config.js 输出配置中定义为 name（默认为 app）

//rollup.config.js
output: {
  sourcemap: true,
  format: 'iife',
  name: 'app',
  file: 'public/build/bundle.js'
},

将 props 传递给 Svelte 的根组件

1 个答案:

向全局范围添加数据

导出和调用应用