Svelte 3：通过道具与父母沟通的孩子们的阵列

Question

Svelte 3：道具和子组件数组

我计划根据优秀的[[redblobgames文章，并使用Svelte 3 / Sapper进行编码，在六角形的瓷砖上编码一个棋盘游戏。

我的问题是孩子之间通过道具与父母之间的交流。我以前已经在使用商店的Svelte的较早版本中完成了此操作，但是我想没有它也可以做到这一点。

假设我有一块六边形SVG瓷砖。 Eachtile的形式为：

<script>
  // 3D coordinate system, see: http://redblobgames.org for details
  export let hex = { q:0, r:0, s: 0 }    
  export let center = { x:0, y: 0 }
  export let corners = []
  export let selected = false

  let points = corners.map (c => `${c.x.toFixed(0)},${c.y.toFixed(0)}`).join (' ')

  // changed by selection process (colors...)
  let inner_class = "inner_tile"

  const toggle_select = () => {
    selected = !selected
  }
</script>

<g class="tile" on:click="[ () => toggle_select() }"
  <polygon class={ inner_class} [ points } />

  <!-- more sophisticated things -->
  <!-- sprites, lbels, masks and animations  -->

</g>

编辑器组件负责从我的redblobgames六角形处理库的自定义实现中选择布局，设置SVG容器，并使用图块填充网格。 Tis只是调用Hex组件的each语句：:
<svg 
  xmlns="www.w3.org/2000/svg"
  viewBox="-50 -50 589 949" 
  width="420"
  height="500"
>
  <!-- just a debugging purpose rectagle ! -->
  <rect x="0" y="0" width="400" height="500" style="fill: none; stroke: black;"/>


  <g class="tiles">
    {#each tiles  as tile }
      <Hex {...tile} />
    {/each}
  </g>  
</svg>

<!-- this helping zone keeps empty, sadly, whatever I attempt to do -->  
<textarea cols="50" rows="10">
  { selected_tiles_output }
</textarea>

当尝试在木板下面的四边形中显示选定的图块参考（q，r，s）时出现问题。 Doinfg在脚本中不起作用：
// imports...

let tiles = []
let selected_tiles = new Set ()
let selected_tiles_output = ''

// onMount to assemlble the board ...

// reactive part which doesn't work:
$: selected_tiles_ouptut = tiles
  .filter (tile => tile.selected)
  .map (tile => tile.hex)
  .map (h => `q: ${h.q}, r: ${h.r}, s: ${h.s} \n`)
  .reduce ((acc, val) => acc + val, '')

问题：
父容器是否有可能在子组件数组中观察某种道具（又名“选定”），即子组件中的一种“可弯曲”道具？

OR-

我最终应该考虑使用商店来代替吗？

注意：在开发的这一点上，由于变化很大，我很难共享一些完整的工作代码示例或源代码。在最坏的情况下，我可以压缩并通过邮件发送src / routes和src / components sapper的文件夹！

有人有想法让我走正确的路吗？

关于，忙碌。

Answer 1

您可以让父母通过使用bind:指令从孩子那里接收反应性更新-请参阅文档here

看起来，当将图块传递到十六进制时，您似乎可以将它们绑定起来。

{#each tiles as {hex, center, corners, selected} }
  <Hex {hex} {center} {corners} bind:selected />
{/each}

然后在Editor.svelte中更改tile.selected时，Hex.svelte应该会得到更新。
或者，您可以在父级toggle_select中定义Editor，而不是在Hex中定义，并将其作为道具传递给Hex。这样，对图块的更新就直接在Editor中进行：
<!-- Editor.svelte -->
  <g class="tiles">
    {#each tiles  as tile }
      <Hex {...tile} toggle_select={() => tile.selected = !tile.selected} />
    {/each}
  </g>  

<!-- Hex.svelte -->
<script>
  export let toggle_select

希望有帮助！