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
1313```
1414
1515> [ !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.
1717
1818``` tsx
1919function Comp({ foo }) {
@@ -24,9 +24,9 @@ const foo = ref('foo')
2424export default <Comp foo = { foo .value } />
2525```
2626
27- #### Solutions
27+ #### Two Solutions
2828
29- 1 . Pass a ref variable as prop:
29+ 1 . ✅ Pass a ref variable as prop:
3030
3131``` tsx
3232function Comp({ foo }) {
@@ -37,7 +37,7 @@ const foo = ref('foo')
3737export default <Comp foo = { foo } />
3838```
3939
40- 2 . Turn on the restructure option to restructure props.
40+ 2 . ✅ Turn on the restructure option to restructure props.
4141
4242``` ts
4343// vite.config.ts
@@ -58,6 +58,9 @@ function Comp({ foo }) {
5858function Comp(_ctx0 ) {
5959 return <div >{ _ctx0 .foo } </div >
6060}
61+
62+ const foo = ref (' foo' )
63+ export default <Comp foo = { foo .value } />
6164```
6265
6366<details >
You can’t perform that action at this time.
0 commit comments