将道具传递给 Svelte 的根组件

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 应用程序运行s 之前初始化（否则它只会是 undefined 甚至崩溃）

导出并调用应用程序

第二种方法是不直接在 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>

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

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

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

将道具传递给 Svelte 的根组件

Passing props to the root component of Svelte

svelte

svelte-component

svelte-3

将数据添加到全局范围

导出并调用应用程序