3

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

如果我设置 compiler option ，传递给组件的属性在该组件内的标记customElement: true中不可用。<script>我使用带有 svelte-loader 的 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 会这样工作？谢谢，干杯！

4

1 回答 1

3

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

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

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

不是那个：

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

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

这样做的原因是，一个 Svelte 组件的 init 函数（也就是<script>你的组件中标签的内容）是从组件构造函数中同步调用的（也就是你做的时候new App(...)）。但是，此时，元素的属性不可用（根据this answer）。

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

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

  // ... or sanity check
  export let other
  $: otherName = other != null ? other + name : null
<script>
于 2020-03-29T22:18:08.550 回答