面试题：Svelte 中如何通过代码风格确保组件属性传递的一致性与可读性

Question

请阐述在 Svelte 组件开发里，当向子组件传递属性时，怎样的代码风格能保证一致性与可读性，比如在命名规范、属性传递方式等方面。同时举例说明一个包含多个属性传递的 Svelte 父子组件代码片段。

Answer 1

命名规范

1. 属性名：遵循驼峰命名法，这样能与 JavaScript 的命名习惯保持一致，提高代码的可读性和可维护性。例如，使用 userName 而不是 user_name 或 UserName。
2. 组件名：同样采用驼峰命名法，首字母大写。例如，MyComponent.svelte。

属性传递方式

1. 简单属性传递：在父组件中，直接在子组件标签上以 属性名="属性值" 的形式传递。例如，如果子组件期望一个 title 属性，父组件可以这样写：

<MyChildComponent title="这是标题" />

2. 复杂对象属性传递：如果需要传递多个相关的属性，可以将它们封装在一个对象中传递。子组件接收后再进行解构。例如：

{#set const user = {name: '张三', age: 25, email: '[e-mail]'} }
<MyChildComponent userInfo={user} />

在子组件中：

<script>
    export let userInfo;
    const {name, age, email} = userInfo;
</script>

包含多个属性传递的 Svelte 父子组件代码片段

父组件 Parent.svelte

<script>
    let message = '子组件你好';
    let count = 5;
    let user = {name: '李四', age: 30};
</script>

<ChildComponent greeting={message} number={count} userData={user} />

子组件 Child.svelte

<script>
    export let greeting;
    export let number;
    export let userData;
    const {name, age} = userData;
</script>

<p>{greeting}</p>
<p>数字是: {number}</p>
<p>用户姓名: {name}, 年龄: {age}</p>