javascript - 如何使用 Svelte 传播 Prop

Question

我正在使用嵌套组件，我想使用父组件中的值设置该嵌套组件的整个 data 属性。

例如，第一个 app.html 组件

<NestedComponent data="{{ forNested }}" />
<script>
  export default {
    data: () => {
      return { forNested: { a: 1, b, 2 }};
    }
  };
</script>

那么嵌套组件 nested-component.html 将是:

<p>Hi {{ a }} and {{ b }}</p>

相反，这意味着我必须这样做:

<p>Hi {{ data.a }} and {{ data.b }}</p>

是否有某种关键字属性可以做到这一点？

<小时/>

更新

由于没有扩展运算符，我做了类似的事情，您可以在其中设置任意字段，例如 data ，然后观察它以更新所有属性。在嵌套组件中:

<div class="stuff">{{ someProperty }}</div>
<script>
export default {
  oncreate: function() {
    // Allow data to set all propeties, since we can't set
    // all from the markup of a component
    this.observe('data', d => {
      if (_.isPlainObject(d)) {
        this.set(d);
      }
    });
  }
}
</script>

然后，当使用该嵌套组件时，其中 forNestedObject 类似于 { someProperty: 123 }:

<NestedComponent data="{{ forNestedObject }}" />

Answer 1

Actually I just tried and YES you can spread props.

父组件

<script>
  import HelloWorld from "./HelloWorld.svelte";
  let allProps = {
    first: 'First prop',
    second: 'Second prop'
  };
</script>

<HelloWorld {...allProps} />

子组件

<script>
    export let first;
    export let second;
</script>

First prop: {first} <br>
Second prop: {second}

See it in action (Codesandbox)