Gil*_*per 3 svelte svelte-component svelte-3
据我了解，与许多前端框架一样，Svelte 允许开发人员将逻辑分离为更小的、可重用的组件文件。这样做时，您可以将 props 从父组件传递到子组件。
我想知道是否可以将 props 传递给根组件本身。我正在尝试使用 Svelte 创建模型，并需要在 App.svelte 范围之外确定一些变量（即在导入的同一级别分配的变量bundle.js）
Ste*_*aes 10
有两种主要方法可以做到这一点
这利用了文档的全局范围在不同脚本之间共享值。它基本上可以归结为只是在 中声明一些内容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'
},
| 归档时间： |
|
| 查看次数： |
2713 次 |
| 最近记录： |