单击按钮后，在父组件中传递道具值的精妙方法-传递给子组件 [英] Svelte way for obtaining props values -in parent component and passing to a child component - after clicking on button

问题描述

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

I'm learning svelte and sapper. I already have everything working correctly in my test app in one component but it is not optimal to build the whole app in one component. So my question here is about the svelte way of doing things. Keep this in mind while reading my question. It's a typical shopping app, page with products, button to add the product to the shopping cart and display the shopping cart and checkout button to finalize the user's purchase with the payment.

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

My issue is about props and how to pass them from the parent component to the child component. I have a child component that includes a button and 4 variables to gather product information (title, price, description, and id). Here is the code:

<script>

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


</script>

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

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

The parent component has a product div, a function in the script to get the product elements and pass it to the child component (with the button) so I can process the purchase, here is the parent component:

<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代码:

my product html code :

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

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

Feel free to correct any code or any setup, I just would like to learn svelte/sapper way of building app.

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

My question is: When I click on the button component (child component) I need to gather the clicked product details (title, price, description, and id) and pass them to my child component (with the button) so I could process adding the product to my backend-session.cart-db...etc

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

The reason I'm separating the child/button component is to be able to just include that component in any part of my app for any future products or component with a product. For example, I have a top.svelte with top products so I just include the child component with the button to be able to purchase any of those products or a shoe.svelte with shoe products and add the button/child component to buy shoes.

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

Is this the right way to set up the app, separate each part to make it easy to edit/modify in the future but I ran into this problem, how do I gather and pass those product details to the props in the child component? Inside passprops I gathered all the correct parameters but how to pass it to the props in the button/child component?

当我运行父组件时，它警告我创建的按钮/子组件没有预期的道具(标题，价格，描述和ID)，因为我尚未按下按钮，所以可以理解.当我单击按钮时，所有道具均未定义.

When I run the parent component, it gives me a warning that the button/child component was created without expected props (title, price, description, and id) which understood because I didn't press on the button yet. When I click on the button, all props are undefined.

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

I would like the help of any svelte/sapper master out there to make me understand this issue. Do I need to use something else like a store (to save the product detail and then pass it to another component that will process the order) or getContest...or just pass the values of the clicked product to the child/button component? But How do I do that?

推荐答案

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

Hey Marco it looks like you could bind all the details to that onclick interaction.

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

I cobbled this together to show you what I mean, so this is a form for illustration you'd hide these inputs in reality:

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

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

So, you have a button component that you can use elsewhere, and the product component where all the details are collated in a form to then use on submission.

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

The product details are then passed down through the component from the main App file.

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

I'm not sure if this works in context of the large scope of what you are doing but that is a way to gather the data you are after I think.

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

I'm also new to Svelte btw! I hope this helps in some small way.

这篇关于单击按钮后，在父组件中传递道具值的精妙方法-传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！