Svelteで 子コンポーネントから親の関数を実行する

概要:

Svelteで、 子コンポーネントから。親コンポーネント関数を呼び出す例になります

---

構成

• Svelte 3

---

参考のコード

https://gist.github.com/kuc-arc-f/8afb58b6197b71a13ba01b679b916f16

---

例

• 親コンポーネント: test.svelte

• parentFunc: 呼ばれる関数、引数も渡せました

• ChildBox　に、parentFuncを渡します

<script lang="ts">
/* svelte, component sample */
import ChildBox from './test/ChildBox.svelte';

//
const parentFunc = function(num: number) {
  console.log("parentFunc", num);
}
</script>

<!-- MarkUp -->
<div class="container">
  <h2>test</h2>  
  <hr />
  <ChildBox  parentFunc={parentFunc} />
</div>

• 子コンポネント: test/ChildBox.svelte
• testFuncから、parentFuncを引数を設定して実行します

<script>
import {link} from 'svelte-spa-router'
export let parentFunc, testNum = 1;
//console.log(display);

//
const testFunc = function() {
  console.log("testFunc");
  testNum = testNum + 1;
  parentFunc(testNum);
}
</script>

<!-- Markup -->
<div class="paginate_wrap text-center ">
  <button class="btn btn-lg btn-outline-dark " type="button" id="button-addon2"
    on:click={testFunc}>Test
  </button>
</div>