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

Question

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

如果我设置编译器选项 customElement: true，传递给组件的属性在该组件的 <script> 标记中不可用。我将 webpack 与 svelte-loader 一起使用。这是一个简单的例子：

// 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 会这样工作？谢谢，干杯！

Answer 1

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

我的意思是，对于自定义元素，它在概念上类似于使用标准组件：

const app = new App({ target })
app.$set({ foo: 'bar' })

不是那个：

const app = new App({ target, props: { foo: 'bar' } })

这就是为什么该值最初（您的 console.log）未定义，但仍按预期显示在标记中的原因。

这是因为 Svelte 组件的 init 函数（即组件中 <script> 标记的内容）是从组件构造函数同步调用的（即，当您执行new App(...))。但是，此时，元素的属性不可用（根据）。

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

<script>
  // default value
  export let name = ''

  // ... or sanity check
  export let other
  $: otherName = other != null ? other + name : null
<script>

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

Svelte.js component property is undefined within script tag with customElement: true

javascript

web-component

svelte

svelte-3

svelte-component

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

Svelte.js component property is undefined within script tag with customElement: true

javascript

web-component

svelte

svelte-3

svelte-component

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