svelte学习：父子组件传值

父传子：

<script>

    /**
     * @type {string}
     * 类型注释要这么写，相当于vue和react的props
     */
    export let title;
</script>
<div>
    <!-- 如果你需要引用传递到组件中的所有道具，包括未使用export声明的道具，可以利用$$props
    直接获取。但通常不建议这么做，因为Svelte难以优化，但在极少数情况下很有用。 -->
    {$$props.speed}
    {title}
</div>

调用
<script>
    import About from '../components/About.svelte';

    const pkg = {
        name: 'svelte',
        version: 3,
        speed: 'blazing',
        website: 'https://svelte.dev'
    };
</script>

<About title={'你好work'} {...pkg} />

子传父：

<script>
    import { createEventDispatcher } from 'svelte';

    //相当于vue3的defineEmit，通过emit的方式传入给父组件数据
    const dispatch = createEventDispatcher();

    const okHandle = () => {
        dispatch('okMessage', {
            info: 'hello work Ok'
        });
    };
    const cancelHandle = () => {
        dispatch('cancelMessage', {
            info: 'hello work Cancel'
        });
    };
</script>

<button on:click={okHandle}> ok </button>

<button on:click={cancelHandle}> cancel </button>

调用
<script>
    import EventTest2 from './EventTest2.svelte';
    //类型声明要用到类似注解的写法,多个写法如下
    const okMessage = (/** @type {any} */ e, /** @type {{name:string,age:number}[]} */ a) => {
        console.log(e, a);
        debugger;
    };
    const cancelMessage = (/** @type {any} */ e) => {
        console.log(e);
        debugger;
    };
    const arr = [{ name: '张三', age: 18 }];
</script>

<EventTest2
    on:okMessage={(e) => {
        okMessage(e, arr);
    }}
    on:cancelMessage={cancelMessage}>hello</EventTest2
>