Svelte 构建组件

组件： 在Svelte中，Web应用程序由组件构建，组件只是将HTML、CSS和JS封装到单个文件.svelte中的可重用块代码。

组件有助于将我们的网页划分为较小的单个单元，可以通过构建组件将它们调用到App.svelte主文件中，通过构建组件，我们可以创建一个可重用的(HTML CSS JS)逻辑元素库。

组件由三个部分组成，分别是：

< script>：这部分包含用于控制组件逻辑的JavaScript代码。
< style>：这部分包含组件内HTML元素的样式信息。
标记： 这部分包含实际的HTML标记元素，如文本、按钮、列表等。

然而，可以根据方便和可重用性的要求按任意顺序进行。

Svelte编译器会遍历每个组件的<style>部分，然后将它们编译成“public/build/bundle.css”文件。

它还编译HTML标记和包含每个组件的Svelte JS代码的<script>部分，并将编译后的本机JavaScript代码存储在“public/build/bundle.js”中。它还将代码添加到“src/main.js”中，以提供对每个组件的引用。

语法：

<script>
    write script here
</script>

<style>
    put your styling here
</style>

<div>
    put html elements here
</div>

参数描述：

**<script></script>： ** 此标签用于封装组件的脚本，我们可以在这里编写箭头函数和JavaScript代码。
<style></style>： 此标签用于封装组件的CSS样式，注意组件内部编写的CSS仅限于该组件内的元素。
<div></div>： 在这里可以使用任意HTML元素，不局限于div元素。

示例1： 在这个示例中，我们将创建一个Svelte组件，为我们的Web应用程序构建一个标题，为了方便起见，我们将命名组件为“header.svelte”。

JavaScript

<style>
    #header{ 
        background-color: black; 
        color: white; 
    } 
    button{ 
        background-color: yellow; 
    } 
    button:hover{ 
        background-color:#00FF00; 
        transform: scale(1.2); 
    }
    #a{ 
        margin-left: 410px; 
    } 
</style> 
<div id='header'> 
    My-app 
    <button id='a'> 
        option-a 
    </button> 
    <button id='b'> 
        option-b 
    </button> 
    <button id='c'> 
        option-c 
    </button> 
</div>

输出：

Svelte 构建组件

示例2： 在这个示例中，我们将创建另一个组件，这个组件将包含 动态图片变量（props） ，以及一些（HTML CSS JS）的封装，我们还将添加两个按钮来触发不同的图片。

Javascript

<script> 
    // here loc is exported as a prop which  
    // can be dynamically changed from outside 
    export let loc =  
'https://media.geeksforgeeks.org/wp-content/uploads/20221011144212/gfgcrop-300x148.png'; 
    function prev() { 
        loc =  
'https://media.geeksforgeeks.org/wp-content/uploads/20221011144212/gfgcrop-300x148.png'; 
    } 
    function next() { 
        loc =  
'https://media.geeksforgeeks.org/wp-content/uploads/20221011163934/pic1-300x147.png'; 
    } 
</script> 
  
<style> 
    img { 
        width: 800px; 
    }
  
    #foot { 
        height: 50px; 
        width: 800px; 
        background-color: aqua; 
    } 
</style> 
  
<div> 
    <img src="{loc}" alt="image"> 
</div> 
<div id='foot'> 
    <button on:click={prev}>PREV</button> 
    <button on:click={next}>NEXT</button> 
</div>

输出：

Svelte 构建组件