Javascript Svelte.js组件属性在带有customElement:true的脚本标记中未定义

这可能就是Svelte.js的工作原理，但我很好奇我是否做错了什么，或者是否有解决办法

如果我设置编译器选项

customElement:true

，则传递给组件的属性在该组件的

标记中不可用。我使用带有苗条加载器的网页包。下面是一个简单的例子：

// index.html

<my-app foo="testing svelte"></my-app>
<script src="bundle.js"></script>


// script.js (bundled into bundle.js)

import App from './App.svelte';
customElements.define('my-app', App);


// App.svelte

<script>
    export let foo;
    console.log(foo); // undefined

    $: bar = foo.toUpperCase(); // Cannot read property 'toUpperCase' of undefined

    $: qux = String(foo).toUpperCase(); // No error, works
</script>

{ foo } // testing svelte - works, as expected

{ qux } // TESTING SVELTE - works, as expected

//index.html
//script.js（捆绑到bundle.js中）
从“/App.svelte”导入应用程序；
自定义元素。定义（'my-app'，app）；
//App.svelte
出口让富；
console.log（foo）；//未定义
$：bar=foo.toUpperCase（）；//无法读取未定义的属性“toUpperCase”
$：qux=String（foo）.toUpperCase（）；//没有错误，工作正常
{foo}//测试苗条-效果如预期
{qux}//测试苗条-效果如预期

另外，如果未设置

customElement:true

，并且使用

const-app=new-app（…）

构造函数实例化框架，

console.log（foo）

将起作用，就像

$：bar=foo.toUpperCase（）

一样

---

有人能解释为什么斯维特是这样工作的吗？谢谢，干杯

对于自定义元素，道具不是从构造函数传递的，它们只是稍后在组件实例上设置的

我的意思是，使用自定义元素，在概念上就像使用标准组件：

const-app=new-app（{target}）
app.$set（{foo:'bar'}）

并不是说：

const-app=new-app（{target，props:{foo:'bar'}）

这就是为什么该值最初（您的

console.log

）未定义，但仍按预期显示在标记中

这是因为Svelte组件的init函数（即组件中

标记的内容）是从组件构造函数同步调用的（即，当您执行

新建应用程序（…）

）。但是，此时元素的属性不可用（根据）

要么给你的道具一个默认值，要么在使用前检查它

//默认值
导出let名称=“”
// ... 还是精神检查
出口出租其他
$：其他名称=其他！=无效的其他+名称：空

谢谢，现在完全讲得通了，这就是为什么

String（foo）.toUpperCase（）

可以工作的原因-通过对声明的（未定义的）变量使用

String

构造函数，它的值是

'undefined'

，这是一个字符串，因此

toUpperCase

不会触发错误，并且当组件被呈现时，它已经具有更新的值。因此，最简单的解决方案基本上是将空字符串设置为默认值。