I am using a nested ponent and I would like to set the whole data property for that nested ponent with a value from the parent ponent.

For instance, first app.html ponent

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

Then the nested ponent, nested-ponent.html, would be:

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

Instead this means I have to do this:

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

Is there some sort of keyword attribute to do this?

Update

Since there is no spread operator I did something like this, where you can set an arbitrarily field, like data and then observe that to update all properties. In the nested ponent:

<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 ponent
    this.observe('data', d => {
      if (_.isPlainObject(d)) {
        this.set(d);
      }
    });
  }
}
</script>

Then when using that nested ponent, where forNestedObject is something like { someProperty: 123 }:

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

I am using a nested ponent and I would like to set the whole data property for that nested ponent with a value from the parent ponent.

For instance, first app.html ponent

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

Then the nested ponent, nested-ponent.html, would be:

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

Instead this means I have to do this:

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

Is there some sort of keyword attribute to do this?

Update

Since there is no spread operator I did something like this, where you can set an arbitrarily field, like data and then observe that to update all properties. In the nested ponent:

<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 ponent
    this.observe('data', d => {
      if (_.isPlainObject(d)) {
        this.set(d);
      }
    });
  }
}
</script>

Then when using that nested ponent, where forNestedObject is something like { someProperty: 123 }:

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

• javascript
• svelte

3 Answers 3

Actually I just tried and YES you can spread props.

Parent Component

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

<HelloWorld {...allProps} />

Child Component

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

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

See it in action (Codesandbox)

There isn't currently a 'spread operator' like <NestedComponent ...forNested>, though it's not inconceivable that we'd add something like that in future. For now, the most concise way to pass data down is to use the :foo directive, which means foo={{foo}}:

<NestedComponent :a :b/>

I use babel + spread operator, this is worked for me:

(svelte version: 2.16.1)

    {#each grid as row}
        {#each row as cell}
            <Cell {...cell} />
        {/each}
    {/each}

how it will look after babel conversion:

    {#each grid as row}
        {#each row as cell}
            <Cell {letter: cell.letter, nRow: cell.nRow, nCol: cell.nCol} />
        {/each}
    {/each}

in svelte this is equivalent to the following:

    {#each grid as row}
        {#each row as cell}
            <Cell letter={cell.letter} nRow={cell.nRow} nCol={cell.nCol} />
        {/each}
    {/each}

Maybe it will work without babel