Svelte中正确导入数据与组件：避免常见误区

在svelte开发中，理解如何正确导入数据和组件至关重要。svelte文件定义的是组件而非普通javascript模块，若需共享纯数据，应使用`.js`文件进行导出。本文将详细阐述svelte的导入机制，并通过示例代码展示如何区分导入数据与渲染组件，从而避免常见的导入错误，确保项目结构清晰且功能正确。

Svelte模块导入机制解析

当你在Svelte项目中导入一个.svelte文件时，例如 import Feedback from './components/feedbacks.svelte';，你实际上导入的是该Svelte组件的构造函数（或组件定义）。这意味着 Feedback 变量现在代表的是一个可以被渲染的Svelte组件类，而不是该组件内部 <script> 标签中导出的任何变量的直接值。

原始问题中的代码尝试将导入的组件构造函数直接渲染为文本：<p>{feedback}</p>。由于 feedback 在这里是一个组件构造函数，Svelte会尝试将其转换为字符串，结果就得到了一个代表组件类的字符串表示，而非预期的数组数据。错误信息 Props cannot be read directly from the component instance... 也进一步印证了这一点，因为它表明你正在尝试像访问普通对象属性一样访问组件实例的内部，而这并非Svelte组件的预期用法。

数据共享的正确姿势：使用JavaScript模块

如果你只是想在不同的Svelte组件之间共享一些纯数据（如数组、对象或常量），那么最简洁和推荐的方式是使用标准的JavaScript文件（.js 或 .ts）。这样，你就可以利用ES模块的导出和导入机制，直接获取数据。

示例：共享反馈数据

1. 创建数据文件 data/feedbackData.js：

   // data/feedbackData.js
   export const feedbackItems = [
     { text: '这是一个很棒的反馈！', rate: 9 },
     { text: '体验还不错。', rate: 7 },
     { text: '有待改进。', rate: 4 }
   ];
   
   // 你也可以导出其他数据或函数
   export const appName = 'Svelte反馈应用';

   登录后复制

2. 在 App.svelte 中导入并使用数据：

   <!-- App.svelte -->
   <script>
     import { feedbackItems, appName } from './data/feedbackData.js';
     // 注意：这里导入的是普通JS模块，所以可以直接解构出导出的变量
   </script>
   
   <main>
     <h1>{appName}</h1>
     <h2>反馈列表：</h2>
     <ul>
       {#each feedbackItems as item}
         <li>{item.text} - 评分: {item.rate}</li>
       {/each}
     </ul>
   </main>
   
   <style>
     main {
       font-family: sans-serif;
       text-align: center;
       padding: 20px;
     }
     ul {
       list-style: none;
       padding: 0;
     }
     li {
       background: #f0f0f0;
       margin: 10px 0;
       padding: 10px;
       border-radius: 5px;
     }
   </style>

   登录后复制

   通过这种方式，App.svelte 可以直接访问 feedbackItems 数组，并按预期渲染其内容。

   

   先见AI

   数据为基，先见未见

   95

   查看详情

组件复用的正确姿势：渲染Svelte组件

如果你的 .svelte 文件确实旨在作为一个可复用的UI组件，那么你需要将其作为组件进行导入和渲染。Svelte组件通常会接受属性（props）来定制其行为或显示内容。

示例：创建和使用反馈列表组件

1. 创建反馈列表组件 components/FeedbacksList.svelte： 这个组件将负责接收一个反馈数组并渲染它。

   <!-- components/FeedbacksList.svelte -->
   <script>
     // 使用 export let 定义组件属性（props）
     export let feedbacks = []; // 默认值为空数组
   </script>
   
   <div>
     <h3>详细反馈：</h3>
     {#if feedbacks.length > 0}
       <ul>
         {#each feedbacks as item}
           <li>{item.text} (评分: {item.rate})</li>
         {/each}
       </ul>
     {:else}
       <p>暂无反馈。</p>
     {/if}
   </div>
   
   <style>
     div {
       border: 1px solid #ccc;
       padding: 15px;
       margin-top: 20px;
       border-radius: 8px;
     }
     ul {
       list-style: decimal;
       padding-left: 20px;
     }
     li {
       margin-bottom: 5px;
     }
   </style>

   登录后复制

2. 在 App.svelte 中导入并渲染组件：

   <!-- App.svelte -->
   <script>
     // 导入纯数据
     import { feedbackItems } from './data/feedbackData.js';
     // 导入Svelte组件
     import FeedbacksList from './components/FeedbacksList.svelte';
   </script>
   
   <main>
     <h1>我的Svelte反馈应用</h1>
     <!-- 渲染 FeedbacksList 组件，并通过 props 传递数据 -->
     <FeedbacksList feedbacks={feedbackItems} />
   </main>
   
   <style>
     main {
       font-family: sans-serif;
       text-align: center;
       padding: 20px;
       max-width: 800px;
       margin: 0 auto;
     }
     h1 {
       color: #333;
     }
   </style>

   登录后复制

   在这个例子中，FeedbacksList 被正确地导入为一个组件，并通过 <FeedbacksList feedbacks={feedbackItems} /> 语法进行渲染，同时将 feedbackItems 数据作为 feedbacks 属性传递给它。

总结与最佳实践

• .js 或 .ts 文件用于数据和工具函数： 当你只需要共享纯粹的JavaScript数据、常量、函数或类时，始终使用标准的JavaScript/TypeScript文件。这样可以保持组件的纯粹性，并避免不必要的组件实例化开销。
• .svelte 文件用于UI组件： 只有当你的文件包含Svelte模板（HTML和CSS）并旨在作为可渲染的UI元素时，才将其定义为.svelte组件。
• 理解 import Component from './Component.svelte'： 这会导入组件的构造函数。要使用这个组件，你需要在模板中将其作为HTML标签渲染，例如 <Component />。
• export let 的作用： 在Svelte组件的 <script> 块中，export let 用于定义该组件可以接受的外部属性（props）。这些属性允许父组件向子组件传递数据或配置。它不意味着将内部变量直接导出给导入该组件的JavaScript模块。

遵循这些原则将帮助你构建结构清晰、易于维护且高效的Svelte应用程序。

以上就是Svelte中正确导入数据与组件：避免常见误区的详细内容，更多请关注php中文网其它相关文章！