【发布时间】：2020-09-25 05:13:16
【问题描述】：
我正在学习苗条和工兵。我已经在一个组件中让我的测试应用程序中的所有东西都能正常工作，但在一个组件中构建整个应用程序并不是最佳选择。所以我的问题是关于做事的苗条方式。在阅读我的问题时请记住这一点。这是一个典型的购物应用程序，带有产品的页面，用于将产品添加到购物车并显示购物车和结帐按钮以完成用户购买的付款。
我的问题是关于道具以及如何将它们从父组件传递到子组件。我有一个子组件，其中包括一个按钮和 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 中，我收集了所有正确的参数，但是如何将其传递给按钮/子组件中的 props？
当我运行父组件时，它会警告我创建按钮/子组件时没有预期的道具（标题、价格、描述和 ID），因为我还没有按下按钮，所以可以理解。当我点击按钮时，所有的道具都是未定义的。
我希望任何苗条/工兵大师的帮助让我理解这个问题。我是否需要使用其他东西，例如商店（保存产品详细信息，然后将其传递给另一个处理订单的组件）或 getContest ......或者只是将点击产品的值传递给子/按钮组件？但是我该怎么做呢？
【问题讨论】：