在 parent 组件中获取道具值并传递给 child 组件的巧妙方法 - 单击按钮后

Question

我正在学习苗条和聪明。我已经在我的测试应用程序中的一个组件中让一切正常工作，但在一个组件中构建整个应用程序并不是最佳选择。所以我的问题是关于做事的精巧方式。阅读我的问题时请记住这一点。这是一个典型的购物应用程序，包含产品的页面、将产品添加到购物车并显示购物车的按钮和结帐按钮以完成用户的购买和付款。

我的问题是关于道具以及如何将它们从 parent 组件传递到 child 组件。我有一个 child 组件，其中包含一个按钮和 4 个用于收集产品信息（标题、价格、描述和 ID）的变量。这是代码：

<script>

 export let title
 export let price
 export let description
 export let id


</script>

<button on:click>Add To Cart Component</button>

parent 组件有一个产品 div，脚本中的一个函数用于获取产品元素并将其传递给 child 组件（带有按钮），这样我就可以处理购买，这里是 parent 组件：

<script>
function passprops (e) {
  let items = e.target.parentElement.parentElement
  let title = items.firstChild.innerHTML  
  let price = items.children[1].innerHTML
  let description = items.children[2].innerHTML
  let id = items.children[3].innerHTML
  }

</script>

我的产品html代码：

 <div>
    <span id="product">parent component</span>
    <span id="price">1000000</span>
    <span id="description"> parent component product</span>
    <span id="id" hidden="">10</span>
    <p class="center"> <Addbutton title={titlep} price={pricep} description={descriptionp} id={idp} on:click={passprops}/>
    </p>
  </div>

随时纠正任何代码或任何设置，我只是想学习 svelte/sapper 构建应用程序的方法。

我的问题是：当我点击按钮组件（child 组件）时，我需要收集点击的产品详细信息（标题、价格、描述和 ID）并将它们传递给我的 child 组件（带有按钮），这样我就可以将产品添加到我的 backend-session.cart-db...etc

我分离 child/button 组件的原因是为了能够将该组件包含在我的应用程序的任何部分中，以用于任何未来的产品或产品的组件。例如，我有一个包含顶级产品的 top.svelte，因此我只包含带有按钮的 child 组件，以便能够购买这些产品中的任何一个，或者包含 shoe.svelte 包含鞋类产品并添加button/child分量买鞋。

这是设置应用程序的正确方法吗，将每个部分分开以方便将来 edit/modify 但我运行遇到这个问题，我如何收集和传递这些child 组件中的道具的产品详细信息？在 passprops 中，我收集了所有正确的参数，但如何将其传递给 button/child 组件中的道具？

当我运行 parent 组件时，它会警告我 button/child 组件是在没有预期道具（标题、价格、描述和 ID）的情况下创建的，这可以理解因为我还没有按下按钮。当我点击按钮时，所有的道具都是未定义的。

我希望得到任何 svelte/sapper 大师的帮助，让我理解这个问题。我是否需要使用其他东西，比如商店（保存产品详细信息，然后将其传递给将处理订单的另一个组件）或 getContest ......或者只是将点击产品的值传递给 child/button成分？但是我该怎么做呢？

Answer 1

嘿 Marco，您似乎可以将所有详细信息绑定到该 onclick 交互。

我把它拼凑在一起是为了向你展示我的意思，所以这是一个说明你在现实中隐藏这些输入的表格：

https://svelte.dev/repl/78a268fb88764918b5cebdc7e485721f

因此，您有一个可以在其他地方使用的按钮组件，以及一个产品组件，其中所有详细信息都整理在一个表单中，然后在提交时使用。

然后产品详细信息从主应用程序文件通过组件向下传递。

我不确定这是否适用于您正在做的大范围工作，但这是我认为收集数据的一种方式。

我也是 Svelte 的新手！我希望这对您有所帮助。

在 parent 组件中获取道具值并传递给 child 组件的巧妙方法 - 单击按钮后

Svelte way for obtaining props values -in parent component and passing to a child component - after clicking on button

sapper

svelte-3