Svelte 嵌套组件

嵌套是Svelte中将不同组件组合在一起以获得期望的用户界面的一种方式，我们可以将自己的组件或第三方组件组合在Svelte应用中。

为什么需要嵌套？

如果我们将所有段落和功能都放在一个组件中，那么管理庞大的代码库将变得非常不实际和繁琐。因此，将应用程序分解为不同的组件有助于重用，并且使调试错误变得更加容易，因为错误可能存在于单个组件中，而不是在整个代码库中随处跳转。

在Svelte中使用嵌套可以从其他文件（any-name.svelte）导入组件并将它们用作HTML元素。

因此，首先，我们将使用两个不同的组件，一个是header，一个是img：

语法：

import component_name from "./component_name.svelte";
<component_name/>

参数描述：

component_name.svelte： 用于将组件导入到另一个组件或App.svelte文件中进行嵌套时使用组件的名称。
<component_name/>： 将导入的组件名称作为HTML标签，在任何组件或App.svelte文件中使用。

Header_component： 将下面的代码保存在header.svelte文件中：

Javascript

<script> 
  
</script> 
  
<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>

img_component: 将下面的代码保存在img.svelte文件中：

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>

现在我们将打开App.svelte文件，并使用以下代码：

示例1：

Javascript

<script> 
    import Top from "./top.svelte"; 
    import ImageDiv from "./image_div.svelte"; 
</script> 
<div> 
    <p> 
        <b>#As you can see both components are  
        now combined inside App.svelte file</b> 
    </p> 
    <Top /> 
    <ImageDiv /> 
</div>

注意： 正如你所看到的，我们可以将独立的组件作为单独的HTML标签<>使用。

输出：

Svelte 嵌套组件

请注意，我们在组件内选择的CSS样式与同一组件保持连接，并不会影响其他组件的样式。Svelte的样式隔离功能提供了无错误样式。

示例2： 现在，我们要创建另一个组件，用于保存开发者的头像、姓名、电子邮件和技能。该组件将具有用于从App.svelte文件外部设置组件值的props。

所以首先创建一个 geeks.svelte 文件，然后粘贴以下代码来创建geeks组件。

Javascript

<script> 
    export let name = 'default',  
        email = 'default',  
        skills = 'default',  
        profile =  
'https://media.geeksforgeeks.org/wp-content/uploads/20221011173439/Defaultdp-199x200.png'; 
</script> 
<style>
    #profile { 
        width: 500px; 
        height: 200px; 
        background-color: black; 
        margin-left: 150px; 
        color: #50C878; 
        border-radius: 25px; 
  
    } 
  
    img { 
        width: 50px; 
        height: 50px; 
        margin-top: 5px; 
        ; 
  
    } 
  
    h3 { 
        margin-left: 150px; 
    } 
</style> 
<div id='profile'> 
    <img src={profile} alt="profile-pic"> 
    <h3>Name = {name}</h3> 
    <h3>Email = {email}</h3> 
    <h3>skills = {skills}</h3> 
  
</div>

现在我们将打开App.svelte文件并使用以下代码：

我们可以在App.svelte文件中使用 < geeks>标签调用geeks组件，并传递属性给它，以便它可以显示我们想要显示的值。

App.svelte

Javascript

<script> 
    import Top from "./top.svelte"; 
    import ImageDiv from "./image_div.svelte"; 
    import Geeks from "./geeks.svelte"; 
</script> 
<div> 
    <p> 
        <b>#As you can see both components are  
        now combined inside App.svelte file</b></p> 
    <Top /> 
    <ImageDiv /> 
    <Geeks name=mohit email=anything@gmail.com skills=frontend /> 
    <br> 
    <Geeks name=bablu email=bablu@gmail.com skills=backend /> 
    <br> 
    <Geeks name=ankit email=ankit@gmail.com skills=fullstack /> 
    <br> 
    <Geeks name=shreya email=shreya@gmail.com skills=devops /> 
</div>

输出:

Svelte 嵌套组件