Svelte - Как вызывать функции в дочерних компонентах

Svelte - Как вызывать функции в дочерних компонентах

Svelte настолько похож на Vanella JavaScript, что я полностью упустил простой способ использовать функции в дочерних компонентах.

Мне часто хотелось вызвать функцию, чтобы показывать всплывающие окна, вызывать API-интерфейсы и вычислять значения из дочернего компонента. Вначале я делал это, наблюдая за переменной в компоненте с помощью $: и вызывая внутреннюю функцию при изменении. Например, когда переменная «show», переданная в качестве опоры, изменилась с false на true, я бы отобразил модальное окно. Мне никогда не нравилось это делать, но это работало.
Использование атрибута «bind:» в компоненте Svelte, кажется, присваивает переменной что-нибудь. Итак, в родительском компоненте просто привяжите переменную к экспортируемой функции или объекту в дочернем компоненте.

В КОМПОНЕНТЕ ДЕТСКИЙ СОЗДАЙТЕ ОБЪЕКТ

<script>
export const b5modal = {
    toggle() {
      show = !show
    },
    show() {
      show = true
      console.log("sob--: show -> show", show)
    },
    hide() {
      show = false
      console.log("sob--: hide -> show", show)
    },
    showHide(isShow) {
      isShow ? (show = true) : (show = false)
      console.log("sob--: showHide -> isShow", isShow)
    },
  }
</script>

В РОДИТЕЛЬСКОМ КОМПОНЕНТЕ СВЯЗАТЬ ДЕТСКИЙ ОБЪЕКТ С ЛОКАЛЬНОЙ ПЕРЕМЕННОЙ

<script>
  import B5modal from "../components/b5ui/B5modal.svelte"
  let modal
</script
<B5modal bind:show={showModal} bind:b5modal={modal} size="lg">
  <div slot="header">
    <h5>{edt.heading}</h5>
    Size = lg
  </div>
  <div>{edt.body}</div>
</B5modal>

ПОЗВОНИТЬ ДЕТСКОМУ ФУНКЦИЮ ОТ РОДИТЕЛЯ

<button on:click={() => modal.showHide(true)} class="btn btn-primary mb-2">Show Modal</button>

А теперь сделайте свои компоненты намного умнее, добавив к ним библиотеки функций!