File tree Expand file tree Collapse file tree 6 files changed +37
-10
lines changed Expand file tree Collapse file tree 6 files changed +37
-10
lines changed Original file line number Diff line number Diff line change 12
12
- [ Observadores] ( /pt-br/class-component/watcher/watcher.md )
13
13
- [ Inject] ( /pt-br/class-component/injection/injection.md )
14
14
- [ Model] ( /pt-br/class-component/model/model.md )
15
- - [ Use ] ( /pt-br/class-component/use/use .md )
15
+ - [ Setup ] ( /pt-br/class-component/setup/setup .md )
16
16
- Herança
17
17
- [ Classes ECMAScript] ( /pt-br/inheritance/es-class/es-class.md )
18
18
- [ Componentes] ( /pt-br/inheritance/component/component.md )
Original file line number Diff line number Diff line change
1
+
2
+ import { Component , Vue } from 'vue-facing-decorator'
3
+
4
+ /*
5
+ Vue options API
6
+ {
7
+ setup() {
8
+ return { key: 'value' }
9
+ }
10
+ }
11
+ */
12
+
13
+ @Component ( {
14
+ setup ( ) {
15
+ return { key : 'value' }
16
+ }
17
+ } )
18
+ export default class MyComponent extends Vue {
19
+ key ! : string
20
+ }
Original file line number Diff line number Diff line change @@ -58,6 +58,12 @@ Se você utiliza SFC ( Single File components ). O método render será aplicado
58
58
59
59
[ ] ( ./code-option-render.ts ' :include :type=code typescript ')
60
60
61
+ ### setup
62
+
63
+ Assim fica a propriedade ` setup ` do vue options API, mas não pode retornar uma função render.
64
+
65
+ [ ] ( ./code-option-setup.ts ' :include :type=code typescript ')
66
+
61
67
### template
62
68
63
69
Assim fica a propriedade ` template ` do vue options API.
Original file line number Diff line number Diff line change 1
- import { Component , Vue , Use } from 'vue-facing-decorator'
1
+ import { Component , Vue , Setup } from 'vue-facing-decorator'
2
2
import { ref } from 'vue'
3
3
import { useRouter , Router } from 'vue-router'
4
4
5
5
@Component
6
6
class MyComponent extends Vue {
7
7
8
- @Use ( useRouter )
8
+ @Setup ( ( props , ctx ) => useRouter ( ) )
9
9
router ! : Router
10
10
11
11
mounted ( ) {
@@ -16,7 +16,7 @@ class MyComponent extends Vue {
16
16
@Component
17
17
class MyComponent2 extends Vue {
18
18
19
- @Use ( ( ) => ref ( 'hello world' ) )
19
+ @Setup ( ( ) => ref ( 'hello world' ) )
20
20
data ! : string
21
21
22
22
mounted ( ) {
Original file line number Diff line number Diff line change
1
+ ## Utilização
2
+
3
+ Use o decorator ` Setup ` exportado de ` 'vue-facing-decorator' ` para injetar [ composables] ( https://vuejs.org/guide/reusability/composables.html ) no seu class componente como uma propriedade.
4
+
5
+ [ ] ( ./code-usage-base.ts ' :include :type=code typescript ')
6
+
7
+
Load Diff This file was deleted.
You can’t perform that action at this time.
0 commit comments