svelte中的组件

组件是可以重用的，将一个或多个组件组合而成就获得了一个Svelte应用

本质上就是一个后缀为.svelte的文件，该文件包含了HTML(<main>标签,可省略)、CSS(<style>标签) 和 JavaScript(<script>标签) 代码

组件有数据隔离的作用，在一个组件中的js代码或者css代码只会影响该组件中的内容而不会影响其他组件

如在一个组件中的css中使用了p{color:red}，如论组件怎么组合，也不会影响到其他组件中的p元素

在一个.svelte文件中，顶层标签中仅允许一个<script>和一个<style>标签

如果在HTML中存在<script>和<style>标签且也在顶层，需要使用<main>顶层标签包含HTML代码以使<script>和<style>不位于顶层

组件的使用

通过import语句导入组件并为该组件命名，在HTML代码中使用该命名的标签即可在标签位置导入组件的内容

一般推荐导入组件命名首字母大写，用以和常规html标签区分

子组件内容：
    <script>...</script>
    <main>...</main>
    <style>...</style>

父组件内容：
    <script>
    import Mycom from "path/sun.svelte";
    </script>
    <Mycom />
<Mycom />标签会显示子组件的内容

模板标签可以使用单标签，也可以使用双标签

代码片段

在模板的编写中，对于一些重复的html代码，可以将其封装为一个命名的代码片段

一个命名的代码片段类似于一个函数，拥有名称和可选的任意数量的参数，参数可以具有默认值

代码片段的定义

{#snippet name(...args)}
        // 表示代码片段定义开始
        // name为该代码片段的名称
        // args表示可选参数
some html code ...
        // 在html code中
{/snippet}
        // 表示代码片段定义完成

示例
{#snippet info(data)}
    <p>{ title }</p>
    <p>{ data.name }</p>
    <p>{ data.age }</p>
{/snippet}

与函数类似，编写代码片段时可以使用类似于"递归调用"的方式

代码片段中的html code中使用的变量作用域为当前的作用域+传入的参数

代码片段的呈现

{@render name(args) } 放置于想要呈现代码片段的位置即可

使用示例

{#snippet img(info)}
    <img src="{info.src}" alt="{info.alt}" title="{info.title}" />
{/snippet}

{#each imgs as info}
    {@render img(ingo)}
{/each}

代码片段的组件传递

在模板中，一个已命名的代码片段可以被认为是一个函数，只不过该仅可以在模板中以{#render name()}的形式进行调用

既然被认为是一个函数，那个就可以通过传递函数名来完成组件间的代码片段传递

{#snippet img(info)}
    <img src="{info.src}" alt="{info.alt}" title="{info.title}" />
{/snippet}

<Table showimg="{img}" />

上面的模板标签我们使用的是单标签，如果使用了双标签，那么模板标签中间的内容会自动作为代码片段传递给子组件

<Table>
    {#snippet img(info)}
        <img src="{info.src}" alt="{info.alt}" title="{info.title}" />
    {/snippet}

    <div>
        其他内容
    </div>
</Table>

标签中的代码片段定义会自动按照同名进行传递

标签中的全部非代码片段会自动隐式的作为名称为children的没有参数的代码片段

所以上面的代码等同于

{#snippet img(info)}
    <img src="{info.src}" alt="{info.alt}" title="{info.title}" />
{/snippet}

{#snippet children()}
    <div>
        其他内容
    </div>
{/snippet}

<Table {img} {children} />