|
1 |
| -# Built-In Components |
| 1 | +# Componentes Integrados |
2 | 2 |
|
3 | 3 | ## component
|
4 | 4 |
|
5 |
| -- **Props:** |
| 5 | +- **Propriedades:** |
6 | 6 |
|
7 | 7 | - `is` - `string | Component`
|
8 | 8 |
|
9 |
| -- **Usage:** |
| 9 | +- **Uso:** |
10 | 10 |
|
11 | 11 | A "meta component" for rendering dynamic components. The actual component to render is determined by the `is` prop. An `is` prop as a string could be either an HTML tag name or a Component name.
|
12 | 12 |
|
13 |
| -- **Example:** |
| 13 | +- **Exemplo:** |
14 | 14 |
|
15 | 15 | ```html
|
16 | 16 | <!-- a dynamic component controlled by -->
|
|
27 | 27 | <component :is="href ? 'a' : 'span'"></component>
|
28 | 28 | ```
|
29 | 29 |
|
30 |
| -- **See also:** [Dynamic Components](../guide/component-dynamic-async.html) |
| 30 | +- **Ver também:** [Dynamic Components](../guide/component-dynamic-async.html) |
31 | 31 |
|
32 | 32 | ## transition
|
33 | 33 |
|
34 |
| -- **Props:** |
| 34 | +- **Propriedades:** |
35 | 35 |
|
36 | 36 | - `name` - `string` Used to automatically generate transition CSS class names. e.g. `name: 'fade'` will auto expand to `.fade-enter`, `.fade-enter-active`, etc.
|
37 | 37 | - `appear` - `boolean`, Whether to apply transition on initial render. Defaults to `false`.
|
|
50 | 50 | - `leave-active-class` - `string`
|
51 | 51 | - `appear-active-class` - `string`
|
52 | 52 |
|
53 |
| -- **Events:** |
| 53 | +- **Eventos:** |
54 | 54 |
|
55 | 55 | - `before-enter`
|
56 | 56 | - `before-leave`
|
|
64 | 64 | - `leave-cancelled` (`v-show` only)
|
65 | 65 | - `appear-cancelled`
|
66 | 66 |
|
67 |
| -- **Usage:** |
| 67 | +- **Uso:** |
68 | 68 |
|
69 | 69 | `<transition>` serve as transition effects for **single** element/component. The `<transition>` only applies the transition behavior to the wrapped content inside; it doesn't render an extra DOM element, or show up in the inspected component hierarchy.
|
70 | 70 |
|
|
101 | 101 | app.mount('#transition-demo')
|
102 | 102 | ```
|
103 | 103 |
|
104 |
| -- **See also:** [Enter & Leave Transitions](/guide/transitions-enterleave.html#transitioning-single-elements-components) |
| 104 | +- **Ver também:** [Enter & Leave Transitions](/guide/transitions-enterleave.html#transitioning-single-elements-components) |
105 | 105 |
|
106 | 106 | ## transition-group
|
107 | 107 |
|
108 |
| -- **Props:** |
| 108 | +- **Propriedades:** |
109 | 109 |
|
110 | 110 | - `tag` - `string`, defaults to `span`.
|
111 | 111 | - `move-class` - overwrite CSS class applied during moving transition.
|
112 | 112 | - exposes the same props as `<transition>` except `mode`.
|
113 | 113 |
|
114 |
| -- **Events:** |
| 114 | +- **Eventos:** |
115 | 115 |
|
116 | 116 | - exposes the same events as `<transition>`.
|
117 | 117 |
|
118 |
| -- **Usage:** |
| 118 | +- **Uso:** |
119 | 119 |
|
120 | 120 | `<transition-group>` serve as transition effects for **multiple** elements/components. The `<transition-group>` renders a real DOM element. By default it renders a `<span>`, and you can configure what element it should render via the `tag` attribute.
|
121 | 121 |
|
|
131 | 131 | </transition-group>
|
132 | 132 | ```
|
133 | 133 |
|
134 |
| -- **See also:** [List Transitions](/guide/transitions-list.html) |
| 134 | +- **Ver também:** [List Transitions](/guide/transitions-list.html) |
135 | 135 |
|
136 | 136 | ## keep-alive
|
137 | 137 |
|
138 |
| -- **Props:** |
| 138 | +- **Propriedades:** |
139 | 139 |
|
140 | 140 | - `include` - `string | RegExp | Array`. Only components with matching names will be cached.
|
141 | 141 | - `exclude` - `string | RegExp | Array`. Any component with a matching name will not be cached.
|
142 | 142 | - `max` - `number | string`. The maximum number of component instances to cache.
|
143 | 143 |
|
144 |
| -- **Usage:** |
| 144 | +- **Uso:** |
145 | 145 |
|
146 | 146 | When wrapped around a dynamic component, `<keep-alive>` caches the inactive component instances without destroying them. Similar to `<transition>`, `<keep-alive>` is an abstract component: it doesn't render a DOM element itself, and doesn't show up in the component parent chain.
|
147 | 147 |
|
|
208 | 208 | `<keep-alive>` does not work with functional components because they do not have instances to be cached.
|
209 | 209 | :::
|
210 | 210 |
|
211 |
| -- **See also:** [Dynamic Components - keep-alive](../guide/component-dynamic-async.html#dynamic-components-with-keep-alive) |
| 211 | +- **Ver também:** [Dynamic Components - keep-alive](../guide/component-dynamic-async.html#dynamic-components-with-keep-alive) |
212 | 212 |
|
213 | 213 | ## slot
|
214 | 214 |
|
215 |
| -- **Props:** |
| 215 | +- **Propriedades:** |
216 | 216 |
|
217 | 217 | - `name` - `string`, Used for named slot.
|
218 | 218 |
|
219 |
| -- **Usage:** |
| 219 | +- **Uso:** |
220 | 220 |
|
221 | 221 | `<slot>` serve as content distribution outlets in component templates. `<slot>` itself will be replaced.
|
222 | 222 |
|
223 | 223 | For detailed usage, see the guide section linked below.
|
224 | 224 |
|
225 |
| -- **See also:** [Content Distribution with Slots](../guide/component-basics.html#content-distribution-with-slots) |
| 225 | +- **Ver também:** [Content Distribution with Slots](../guide/component-basics.html#content-distribution-with-slots) |
226 | 226 |
|
227 | 227 | ## teleport
|
228 | 228 |
|
229 |
| -- **Props:** |
| 229 | +- **Propriedades:** |
230 | 230 |
|
231 | 231 | - `to` - `string`. Required prop, has to be a valid query selector, or an HTMLElement (if used in a browser environment). Specifies a target element where `<teleport>` content will be moved
|
232 | 232 |
|
|
251 | 251 |
|
252 | 252 | Notice that this will move the actual DOM nodes instead of being destroyed and recreated, and it will keep any component instances alive as well. All stateful HTML elements (i.e. a playing video) will keep their state.
|
253 | 253 |
|
254 |
| -- **See also:** [Teleport component](../guide/teleport.html#teleport) |
| 254 | +- **Ver também:** [Teleport component](../guide/teleport.html#teleport) |
0 commit comments