【Svelte】-（3）Props 组件传值

在这里你可以感受到Svelte的简洁。

声明Props

相比Vue和React，Svelte可能更适合你

【Svelte】-（1）基础知识 / 快速上手 / 添加数据 / 动态属性 / CSS样式 / 嵌套组件 / HTML标签

【Svelte】-（2）reactivity响应式 ｜ 赋值 / reactivity变量 / reactivity代码语句 / reactivity对象

到目前为止，我们只处理了内部状态，也就是说，值只能在给定的组件内访问。

在任何实际应用程序中，我们都需要将数据从一个组件向下传递给它的子组件。为此，我们需要声明属性，通常缩写为“props”。在 Svelte 中，使用 export 关键字来做到这一点。

这里的 export 并不是通常javascript的导出相同，和 $: 一样，请慢慢习惯这一点，不过我觉得还是蛮简洁的。

新建一个 Follower.svelte 组件

子组件使用 export 关键词声明变量

<script>
  export let name

  let isFollow = false
  $: followTip = isFollow ? 'Unfollow' : `Follow  ${name}`
</script>

<button on:click={()=>isFollow=!isFollow}>
  {followTip}
</button>

默认值

在声明的时候定义就好了

export let user = 'not'

使用props

使用方式和其他框架相差不大

App.svelte

<script>
  import Follower from './Follower.svelte'

  let user = {
    name: 'uiuing',
    nike: '我想养只猫'
  }
</script>

<Follower name={user.name} />

也可以这样传递

<Follower {... user} />