自定义组件属性统一设置与全部获取
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 难以优化。