1 前言
前端组件化开发,单向数据流,有了 state、props 和状态更新机制,也就能做简单的 web 应用啦~
2 正文
props 在根组件上以 props
选项的形式声明,在嵌套组件树中,可以*设置和传递。
先写一个子组件 Nested.svelte
,该组件会在 App.svelte 中被引用,这里 export let name;
不是 ESM 的常规使用方式,它类似对 props 的声明定义,并无实际导出意义。
<script> export let name; export let age = 23; // 指定默认值 </script> <h3>{name} - {age}</h3>
在 App.svelte
中,Nested 组件需要使用常规方式引用,然后按照约定的大写开头进行使用, prop 的传递也是常规的。
<script> import Nested from "./Nested.svelte"; </script> <Nested name="Lilei" />
3 总结
props 的传递,在 Vue、React 和 Svelte 中各不相同,其他都基本一致。