javascript - 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

对于自定义元素，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 )。

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

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

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