File tree Expand file tree Collapse file tree 1 file changed +7
-4
lines changed Expand file tree Collapse file tree 1 file changed +7
-4
lines changed Original file line number Diff line number Diff line change @@ -13,7 +13,7 @@ npm i unplugin-vue-jsx-vapor
13
13
```
14
14
15
15
> [ !CAUTION]
16
- > The destructuring of props in a functional component will cause loss of reactivity.
16
+ > ❌ The destructuring of props in a functional component will cause loss of reactivity.
17
17
18
18
``` tsx
19
19
function Comp({ foo }) {
@@ -24,9 +24,9 @@ const foo = ref('foo')
24
24
export default <Comp foo = { foo .value } />
25
25
```
26
26
27
- #### Solutions
27
+ #### Two Solutions
28
28
29
- 1 . Pass a ref variable as prop:
29
+ 1 . ✅ Pass a ref variable as prop:
30
30
31
31
``` tsx
32
32
function Comp({ foo }) {
@@ -37,7 +37,7 @@ const foo = ref('foo')
37
37
export default <Comp foo = { foo } />
38
38
```
39
39
40
- 2 . Turn on the restructure option to restructure props.
40
+ 2 . ✅ Turn on the restructure option to restructure props.
41
41
42
42
``` ts
43
43
// vite.config.ts
@@ -58,6 +58,9 @@ function Comp({ foo }) {
58
58
function Comp(_ctx0 ) {
59
59
return <div >{ _ctx0 .foo } </div >
60
60
}
61
+
62
+ const foo = ref (' foo' )
63
+ export default <Comp foo = { foo .value } />
61
64
```
62
65
63
66
<details >
You can’t perform that action at this time.
0 commit comments