在customElement为true的脚本标记内未定义Svelte.js组件属性
在customElement为true的脚本标记内未定义Svelte.js组件属性
提问于 2020-03-28 18:19:11
这可能就是Svelte.js的工作原理，但我很好奇我是不是做错了什么，或者是否有解决办法。
如果我设置了编译器选项customElement: true，则传递给组件的属性在该组件的<script>标记中不可用。我用的是带svelte装载机的webpack。下面是一个简单的例子：
// 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另外，如果没有设置customElement: true，并且使用const app = new App(...)构造函数实例化了框架，则console.log(foo)将像$: bar = foo.toUpperCase()一样工作。
有人能解释一下为什么Svelte是这样工作的吗？谢谢，干杯！
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-30 06:18:09
对于自定义元素，属性不是从构造函数传递的，它们只是稍后在组件实例上设置的。
我的意思是，使用自定义元素，在概念上就像使用标准组件一样：
const app = new App({ target })
app.$set({ foo: 'bar' })不是这样的：
const app = new App({ target, props: { foo: 'bar' } })这就是为什么这个值最初(您的console.log)是未定义的，但仍然在标记中按预期显示。
这样做的原因是，Svelte组件的初始化函数(即组件中的<script>标记的内容)是从组件构造函数同步调用的(即，当您执行new App(...)时)。但是，在这一点上，元素的属性不可用(根据this answer)。
要么给你的道具一个默认值，要么在使用之前检查它...
<script>
// default value
export let name = ''
// ... or sanity check
export let other
$: otherName = other != null ? other + name : null
<script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60899838
复制相关文章
相似问题
腾讯云开发者
