使用svelte打造一個組件（發佈npm）

時間 2020-03-28

標籤使用 svelte 打造一個組件發佈 npm 简体版

原文原文鏈接

先放項目地址：https://github.com/Iroha1024/...react

瞭解svelte

Svelte 與諸如 React 和 Vue 等 JavaScript 框架相似，可是有一個關鍵的區別：Svelte 在構建/編譯階段將你的應用程序轉換爲理想的 JavaScript應用，而不是在運行階段解釋應用程序的代碼。

https://www.sveltejs.cn/tutor...git

簡而言之，編譯出的js代碼無需引入框架，可嵌入在其餘代碼中，用來寫一些小組件十分方便es6

svelte基礎

最初的組件

一個簡單的組件就實現了，不過除了展現還無用處，你須要添加更多代碼來改進你的組件github

<script>
    let name = 'world'
</script>

<h1>hello {name}!</h1>

組件實例化

實例化才能算的上一個應用，不然你的組件只能呆在展現頁面裏typescript

prop能夠接收外部數據（也許你並不須要）npm

App.sveltejson

<script>
    epxort let name     //能夠設置初始值
</script>

<h1>hello {name}!</h1>

index.jsapi

import App from './App.svelte'

const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
})

更豐富的組件

svelte提供一種變量聲明方式$: variable，用於依賴表達式後面的值，如當name變化時，reactiveVal會一同變化，而用其餘方式（let）則變量不會具備響應式。固然還有條件判斷、語句一樣可使用$:聲明 https://www.sveltejs.cn/tutor...
prop綁定：引入其餘組件，若是子組件修改prop值，父組件需以bind:prop形式聲明，父組件才能獲取響應式數據

App.svelteapp

<script>
    import Child from './Child.svelte'
    
    let name = 'world'
    $: reactiveVal = 'reactive ' + name
    
    function logName() {
        console.log('name:', name)
        console.log('reactiveVal:', reactiveVal)
    }
</script>

<h1>{reactiveVal}</h1>
<Child bind:name on:click={logName}/>

<!--
    子組件改值，父組件內數據不響應
    <Child name={name} on:click={logName}/>
    簡寫
    <Child {name} on:click={logName}/>
-->

Child.svelte框架

原生事件傳遞：子組件若要將事件（如click）經過組件傳遞，則需在外層聲明
自定義事件傳遞：https://www.sveltejs.cn/tutor...

<script>
export let name

function changeName() {
    name = name === 'world' ? 'hello hello' : 'world'
}
</script>

<!-- 需聲明 -->
<div on:click>  
    <h1>hello {name}!</h1>
    <button on:click={changeName}>
        change name
    </button>
</div>

其餘特性

//條件渲染
{#if x > 10}
    <p>...</p>
{:else if 5 > x}
    ...
{:else}
    ...
{/if}

//列表渲染
{#each things as thing (thing.id)}
    <p>...</p>
{/each}

<script>
    import { onMount, tick } from 'svelte'

    let  div
    
    onMount(() => {
        //獲取dom
    })
</script>

<div bind:this={div}></div>

//動態組件
<svelte:component this={componentName}/>

async function fn() {
    //執行
    await tick()
    //dom更新後再執行
}