svelte prop值不适用于if语句

Question

这是我的瘦组件代码

<script>
export let canCascade = true;
let show = true;
function cascade() {
if (canCascade) {
show = !show;
}
}
</script>
{#if show}
<div class="shade" on:click|self={cascade}>
shade
</div>
{/if}

当我将组件用作<Component canCascade=false />时，"if块"不起作用。但是对里面的值进行硬编码很好。我是不是遗漏了什么——一些概念错误？

Answer 1

就像@Corrl在评论中指出的那样，你需要使用{括号}。如果不这样做，变量将遵循html属性的规则。

工作回复https://svelte.dev/repl/d13df678eab243e9a13fb705da197219?version=3

Answer 2

在Svelte中，当我们想将JavaScript值/表达式传递给组件的属性时，我们需要用花括号｛｝包装该值/表达式。

否则，它将被用作字符串。

举个例子，看看下面的代码：

组件：

<script>
export let test = true;
$test: console.log(`typeof test = ${typeof test}`);
</script>

应用程序：

<script>
import Component from "./Component.svelte";
</script>
<Component test=true />
<div />

当您打开浏览器开发工具中的控制台时，输出为：

测试类型=字符串