1

我正在使用嵌套组件，我想使用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 }}" />
4

3 回答 3

4

其实我只是试过了，是的，你可以传播道具。

父组件

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

看到它在行动（Codesandbox）

于 2019-05-17T15:29:30.020 回答
1

目前还没有类似 的“传播运算符” <NestedComponent ...forNested>，尽管将来我们会添加类似的东西并非不可想象。目前，传递数据最简洁的方法是使用:foo指令，这意味着foo={{foo}}：

<NestedComponent :a :b/>
于 2017-08-23T12:38:58.563 回答
1

我使用babel + spread operator，这对我有用：

（精简版：2.16.1）

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

babel 转换后的样子：

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

在 svelte 中，这相当于以下内容：

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

也许它会在没有 babel 的情况下工作

于 2019-03-01T08:31:06.217 回答