Svelte 怎样传入 props

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" />

 

image

3 总结

props 的传递,在 Vue、React 和 Svelte 中各不相同,其他都基本一致。

参考

posted on 2021-09-09 09:25  aisowe  阅读(120)  评论(0编辑  收藏  举报

导航