🍘

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

2022/12/06に公開

概要:

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>

Discussion