面试题：Svelte中如何在模块上下文间传递数据

Question

在Svelte项目中，有两个模块A和B，模块A有一个数据变量`userData`，现在需要将`userData`传递到模块B并在B中正确使用，请描述实现这个过程的具体步骤和涉及到的关键语法。

Answer 1

1. 步骤：
   • 在模块A中：
     • 首先确保userData已经定义。例如：

       <script>
         let userData = { name: 'John', age: 30 };
       </script>
       

     • 然后，通过export关键字将userData导出。可以在<script>标签内添加：

       <script>
         let userData = { name: 'John', age: 30 };
         export { userData };
       </script>
       

   • 在模块B中：
     • 使用import关键字从模块A导入userData。假设模块A的路径为./A.svelte，则在模块B的<script>标签内添加：

       <script>
         import { userData } from './A.svelte';
       </script>
       

     • 导入后就可以在模块B中使用userData了，例如在模板部分显示userData的值：

       <script>
         import { userData } from './A.svelte';
       </script>
       <div>
         <p>Name: {userData.name}</p>
         <p>Age: {userData.age}</p>
       </div>
       

2. 关键语法：
   • export：在Svelte模块中用于将变量、函数等导出，使其可以被其他模块使用。语法为export { variableName };，如果想给导出的变量取别名，可以用export { variableName as alias };。
   • import：用于从其他模块导入导出的内容。语法为import { variableName } from 'path/to/module';，如果导入的模块有默认导出，可以用import defaultExport from 'path/to/module'; ，如果同时有默认导出和命名导出，可以用import defaultExport, { namedExport } from 'path/to/module';。