Question

我正在学习苗条和客。我已经可以在一个组件中的测试应用程序中正常运行所有事情，但是在一个组件中构建整个应用程序并不是最佳选择。所以我的问题是关于做事的精妙方法。阅读我的问题时请记住这一点。这是一个典型的购物应用程序，带有产品页面，将产品添加到购物车并显示购物车的按钮和结帐按钮，以通过付款最终确定用户的购买。

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

<script>

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


</script>

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

父组件具有一个产品div，脚本中的一个函数用于获取产品元素并将其传递给子组件（使用按钮），以便我可以处理购买，这是父组件：

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

可以随意更正任何代码或任何设置，我只是想学习构建应用程序的精巧/实用方法。

我的问题是：当我单击按钮组件（子组件）时，我需要收集单击的产品详细信息（标题，价格，描述和ID），并将它们传递给我的子组件（使用按钮），所以我可以将产品添加到我的backend-session.cart-db ...等

我将子/按钮组件分开的原因是，它可以将该组件仅包含在我的应用程序的任何部分中，以用于将来的任何产品或带有产品的组件。例如，我有一个top.svelte，上面有顶级产品，所以我只在子组件中添加了按钮，以便可以购买其中的任何产品，或者在鞋类产品中添加了shoe.svelte，并添加了按钮/子组件来购买鞋子。

这是设置应用程序的正确方法吗，将每个部分分开以使其将来易于编辑/修改，但是我遇到了这个问题，如何收集这些产品详细信息并将其传递给孩子中的道具零件？在passprops内部，我收集了所有正确的参数，但是如何将其传递给button / child组件中的props？

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

我想要那里的任何瘦弱/精打细算的大师的帮助，以使我了解此问题。我是否需要使用诸如商店之类的其他东西（保存产品详细信息，然后将其传递给将处理订单的另一个组件）或getContest ...，或者仅将单击产品的值传递给子/按钮组件？但是我该怎么做？

Answer 1

Marco，看来您可以将所有详细信息绑定到该onclick交互上。

我将它们拼凑在一起以展示我的意思，因此这是一种说明形式，您可以将这些输入隐藏在现实中：

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

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

然后，将产品详细信息从主App文件向下传递到组件。

我不确定这是否可以在您正在做的大范围工作中发挥作用，但这是一种收集您想得到的数据的方式。

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

单击按钮

1 个答案: