Svelte 自定义组件属性统一设置与全部获取

1 前言

当一个组件具有过多 props 时，就渴望有一种统一设置的方法；
当子组件上存在从父组件传过来的非 props 属性时，子组件又该怎样获取呢？

2 正文

首先还是正常书写子组件：Nested.svelte，这里的$$props 可以获取父级传递的所有属性，包括 props 属性和非 props 属性。

<script>
  export let name;
  export let age = 23; // 指定默认值
  console.log($$props); // {name: "Lileilei", age: 22, gender: "1"}
</script>

<h3>{name} - {age}</h3>

 

然后在 App.svelte 中引用 Nested.svelte 并统一设置 props，以及增加一个非 props 属性作为 $$props 作用的演示。

<script>
  import Nested from "./Nested.svelte";
  const props = {
    name: "Lileilei",
    age: 22,
  };
</script>

<Nested {...props} gender="1" />

 

3 总结

$$prop在极少数情况下比较有用，但最好少用，因为 Svelte 难以优化。

4 参考

• https://www.sveltejs.cn/tutorial/spread-props