Удобный способ получения значений props - в родительском компоненте и передачи дочернему компоненту - после нажатия кнопки

Question

Я учусь стройным и саперным. У меня уже все работает правильно в моем тестовом приложении в одном компоненте, но собирать все приложение в одном компоненте не оптимально. Итак, мой вопрос здесь о том, как вести себя изящно. Имейте это в виду, читая мой вопрос. Это типичное приложение для покупок, страница с продуктами, кнопка для добавления продукта в корзину и отображение корзины покупок и кнопка оформления заказа, чтобы завершить покупку пользователя с оплатой.

Моя проблема связана с реквизитами и их передачей из родительского компонента в дочерний. У меня есть дочерний компонент, который включает кнопку и 4 переменные для сбора информации о продукте (название, цена, описание и идентификатор). Вот код:

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

Не стесняйтесь исправлять любой код или любую настройку, я просто хотел бы узнать изящный / саперный способ создания приложения.

Мой вопрос: когда я нажимаю на компонент кнопки (дочерний компонент), мне нужно собрать сведения о продукте, на который щелкнули (название, цена, описание и идентификатор), и передать их моему дочернему компоненту (с помощью кнопки), чтобы я мог обработать добавление продукт в мой backend-session.cart-db... и т. д.

Причина, по которой я разделяю дочерний компонент / компонент кнопки, заключается в том, чтобы иметь возможность просто включить этот компонент в любую часть моего приложения для любых будущих продуктов или компонентов с продуктом. Например, у меня есть top.svelte с топовыми продуктами, поэтому я просто включаю дочерний компонент с кнопкой, чтобы иметь возможность покупать любой из этих продуктов или shoe.svelte с обувными продуктами, и добавляю кнопку / дочерний компонент для покупки обуви.

Это правильный способ настроить приложение, разделить каждую часть, чтобы упростить редактирование / изменение в будущем, но я столкнулся с этой проблемой, как мне собрать и передать эти сведения о продукте в реквизиты в дочернем компоненте? Внутри passprops я собрал все правильные параметры, но как передать их реквизитам в кнопке / дочернем компоненте?

Когда я запускаю родительский компонент, он выдает предупреждение о том, что кнопка / дочерний компонент был создан без ожидаемых реквизитов (заголовок, цена, описание и идентификатор), которые были поняты, потому что я еще не нажимал кнопку. Когда я нажимаю на кнопку, все свойства не определены.

Мне нужна помощь любого стройного / саперного мастера, чтобы я понял эту проблему. Нужно ли мне использовать что-то еще, например магазин (для сохранения сведений о продукте, а затем передать их другому компоненту, который будет обрабатывать заказ) или getContest... или просто передать значения продукта, по которому щелкнули, дочернему компоненту / компоненту кнопки? Но как мне это сделать?

Answer 1

Привет, Марко, похоже, ты можешь связать все детали с этим взаимодействием onclick.

Я собрал это вместе, чтобы показать вам, что я имею в виду, так что это форма для иллюстрации, вы бы скрыли эти данные на самом деле:

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

Итак, у вас есть компонент кнопки, который можно использовать в другом месте, и компонент продукта, в котором все детали собраны в форму для последующего использования при отправке.

Затем сведения о продукте передаются через компонент из основного файла приложения.

Я не уверен, работает ли это в контексте большого объема того, что вы делаете, но я думаю, что это способ собрать данные, которые вам нужны.

Кстати, я тоже новичок в Svelte! Я надеюсь, что это немного поможет.