docs: remove deep nesting example and add override example to expressions

pull/15257/head
melihguleyupoglu 2 years ago
parent 3fac864c8a
commit e5e675d404

@ -43,51 +43,11 @@ You can specify a fallback value for a prop. It will be used if the component's
<Nested answer={42} /> <!-- answer is set to 42 -->
<Nested answer={null} /> <!-- answer is set to null (default value is not used)-->
<Nested /> <!-- answer is set 3 (default value) -->
<Nested answer={undefined}/> <!-- answer is set 3 (default value) -->
<Nested /> <!-- answer is set to 3 (default value) -->
<Nested answer={undefined}/> <!-- answer is set to 3 (default value) -->
```
Deep nesting refers to having components nested within other components across multiple levels. In this setup, props can be passed from parent to child components through several layers.
```svelte
<script>
let count = 3;
</script>
<!-- App.svelte -->
<First {count} />
```
```svelte
<script>
export let count;
</script>
<!-- First.svelte -->
<p>First: {count}</p>
<Second {count} />
```
```svelte
<script>
export let count;
</script>
<!-- Second.svelte -->
<p>Second: {count}</p>
<Third {count} />
```
```svelte
<script>
export let count;
</script>
<!-- Third.svelte -->
<p>Third: {count}</p>
```
To get all properties, use rest syntax:
```svelte

@ -188,17 +188,16 @@ When using {expression} inside markup, Svelte automatically converts the value t
let emptyStr = "";
let num = 1;
let bool = false;
let obj = { key: "value" };
let objToStr = obj.toString();
let obj1 = { key: "value" };
let obj2 = { toString: () => "str" };
let empty = undefined;
let nul = null;
<p>{emptyStr}</p> <!-- Renders as: <p></p> -->
<p>{num}</p> <!-- Renders as: <p>1</p> -->
<p>{bool}</p> <!-- Renders as: <p>false</p> -->
<p>{obj}</p> <!-- Renders as: <p>[object Object]</p> -->
<p>{objToStr}</p> <!-- Renders as: <p>[object Object]</p> -->
<p>{obj1}</p> <!-- Renders as: <p>[object Object]</p> -->
<p>{obj2}</p> <!-- Renders as: <p>str</p> -->
<p>{empty}</p> <!-- Renders as: <p></p> (empty string) -->
<p>{nul}</p> <!-- Renders as: <p></p> -->
```

Loading…
Cancel
Save