Skip to content

Commit 9b66004

Browse files
author
brendon silva
committed
docs-pr-br: setup
1 parent de750a8 commit 9b66004

File tree

6 files changed

+37
-10
lines changed

6 files changed

+37
-10
lines changed

docs/pt-br/_sidebar.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
- [Observadores](/pt-br/class-component/watcher/watcher.md)
1313
- [Inject](/pt-br/class-component/injection/injection.md)
1414
- [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)
1616
- Herança
1717
- [Classes ECMAScript](/pt-br/inheritance/es-class/es-class.md)
1818
- [Componentes](/pt-br/inheritance/component/component.md)
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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+
}

docs/pt-br/class-component/component/component.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,12 @@ Se você utiliza SFC ( Single File components ). O método render será aplicado
5858
5959
[](./code-option-render.ts ':include :type=code typescript')
6060

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+
6167
### template
6268

6369
Assim fica a propriedade `template` do vue options API.

docs/pt-br/class-component/use/code-usage-base.ts renamed to docs/pt-br/class-component/setup/code-usage-base.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { Component, Vue, Use } from 'vue-facing-decorator'
1+
import { Component, Vue, Setup } from 'vue-facing-decorator'
22
import { ref } from 'vue'
33
import { useRouter, Router } from 'vue-router'
44

55
@Component
66
class MyComponent extends Vue {
77

8-
@Use(useRouter)
8+
@Setup((props,ctx)=>useRouter())
99
router!: Router
1010

1111
mounted() {
@@ -16,7 +16,7 @@ class MyComponent extends Vue {
1616
@Component
1717
class MyComponent2 extends Vue {
1818

19-
@Use(() => ref('hello world'))
19+
@Setup(() => ref('hello world'))
2020
data!: string
2121

2222
mounted() {
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
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+

docs/pt-br/class-component/use/use.md

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)