基础

# 页面数据（Text expressions）

<script>
    const str = '我是一个Svelte'
</script>

<p>{str}</p>

1
2
3
4
5

我们可以在标签元素中使用{}的方式引入我们定义的变量，我们在script标签中定义的顶层变量都能直接在HTML模板中进行使用。

# 标签属性与组件传值（Attributes and props）

# Attributes

<script>
    const src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2455057485,102104212&fm=26&gp=0.jpg';
</script>

<img src={src} alt="这是一张图"/>

1
2
3
4
5

跟给页面添加普通数据差不多，一个{}中放上你定义在script中的变量即可。

# props

<script>
    import Hello from './components/Hello.svelte'
    const msg = '这是父组件'
</script>

<Hello :msg="msg"></Hello>

1
2
3
4
5
6

当然这里也有一个简写的方式，如果传入普通标签或者Svelte组件的props与对应的变量名一致，则可以直接将:src={src}简写成{src}

# 渲染HTML字符串

在某些特定场景下我们需要有能够将一个编写好的HTML字符串直接渲染在页面中，在普通js操作中吗，我们可以使用innerHTML进行该渲染操作，那么在Svelte中又该怎么进行使用呢。

<script>
    const htmlString = '<p>我是一个HTML</p>'
</script>

<p>{str}</p>

<img src={imageURL} alt=""/>

{@html htmlString}

<div>{@html htmlString}</div>

1
2
3
4
5
6
7
8
9
10
11

如上述代码所示，我们可以把他包裹在一个其他html标签中，也可以直接进行渲染，这里用到的关键字就是@html，在使用的时候只要在需要渲染的字符串变量前面加上这个关键字即可。

未完待续......

编辑

上次更新: 2023/11/25, 4:11:00

← 环境搭建 Npm 踩坑日记→