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

目前还没有“点差运营商”。就像var result = System.Web.HttpUtility.HtmlDecode("鱼");一样，尽管我们未来会添加类似的内容并不是不可思议的。目前，传递数据的最简洁方法是使用<NestedComponent ...forNested>指令，这意味着:foo：

foo={{foo}}

Answer 2

我使用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}

将此is equivalent修改为以下内容：

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

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

Answer 3

实际上我只是试过了，是，您可以散布道具。

父组件

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

如何使用Svelte传播道具

3 个答案: