Skip to content

Commit b255d4e

Browse files
committed
fix: sync web-components.md with vuejs/docs
1 parent 4cb21f4 commit b255d4e

File tree

1 file changed

+14
-7
lines changed

1 file changed

+14
-7
lines changed

src/guide/extras/web-components.md

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,7 @@ Pokud budou custom elementy použity v aplikaci, která Vue také používá, m
218218
Je doporučeno exportovat jednotlivé konstruktory elementů, abyste uživatelům poskytli flexibilitu importovat je na vyžádání a registrovat je s požadovanými názvy tagů. Můžete také exportovat pohodlnou funkci pro automatickou registraci všech elementů. Zde je příklad vstupního bodu Vue knihovny custom elementů:
219219

220220
```js [elements.js]
221+
221222
import { defineCustomElement } from 'vue'
222223
import Foo from './MyFoo.ce.vue'
223224
import Bar from './MyBar.ce.vue'
@@ -235,11 +236,13 @@ export function register() {
235236
```
236237

237238
Konzument může elementy použít ve Vue souboru:
239+
238240
```vue
239241
<script setup>
240242
import { register } from 'path/to/elements.js'
241243
register()
242244
</script>
245+
243246
<template>
244247
<my-foo ... >
245248
<my-bar ... ></my-bar>
@@ -248,10 +251,13 @@ register()
248251
```
249252

250253
Nebo v jakémkoliv jiném frameworku, například s využitím JSX a custom názvy:
254+
251255
```jsx
252256
import { MyFoo, MyBar } from 'path/to/elements.js'
257+
253258
customElements.define('some-foo', MyFoo)
254259
customElements.define('some-bar', MyBar)
260+
255261
export function MyComponent() {
256262
return <>
257263
<some-foo ... >
@@ -265,7 +271,9 @@ export function MyComponent() {
265271

266272
Pokud píšete šablony Vue SFC komponent, můžete chtít [ověřovat typy](/guide/scaling-up/tooling.html#typescript) použitých Vue komponent, včetně těch, které jsou definovány jako custom elementy.
267273

268-
Custom elementy jsou registrovány globálně pomocí nativních API, takže ve výchozím nastavení nemají při použití ve Vue šablonách odvozování typů. Abyste poskytli podporu typů pro Vue komponenty registrované jako custom elementy, můžeme zaregistrovat globální typy komponent pomocí rozhraní [`GlobalComponents`](https://github.com/vuejs/language-tools/wiki/Global-Component-Types) ve Vue šablonách a/nebo v&nbsp;[JSX](https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements):
274+
Custom elementy jsou registrovány globálně pomocí nativních API prohlížečů, takže ve výchozím nastavení nemají při použití ve Vue šablonách odvozování typů. Abychom poskytli typovou podporu pro Vue komponenty registrované jako custom elementy, můžeme zaregistrovat globální typování komponent pomocí [rozhraní `GlobalComponents`](https://github.com/vuejs/language-tools/wiki/Global-Component-Types) pro typovou kontrolu ve Vue šablonách (uživatelé JSX mohou místo toho obohatit typ [JSX.IntrinsicElements](https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements), což si zde neukazujeme).
275+
276+
Takto je možné definovat typ pro custom element vytvořený pomocí Vue:
269277

270278
```typescript
271279
import { defineCustomElement } from 'vue'
@@ -293,7 +301,7 @@ declare module 'vue' {
293301

294302
## Web Components a TypeScript {#non-vue-web-components-and-typescript}
295303

296-
Toto je doporučený postup, jak umožnit kontrolu typů v SFC šablonách pro Custom elementy, které nejsou vytvořeny pomocí Vue.
304+
Toto je doporučený postup, jak umožnit typovou kontrolu v SFC šablonách pro Custom elementy, které nejsou vytvořeny pomocí Vue.
297305

298306
:::tip Info
299307
Jde o obecně platný způsob, jak to udělat, ale detaily se mohou se trochu lišit v závislosti na frameworku použitém pro vytvoření custom elementu.
@@ -346,8 +354,8 @@ type DefineCustomElement<
346354
Events extends EventMap = {},
347355
SelectedAttributes extends keyof ElementType = keyof ElementType
348356
> = new () => ElementType & {
349-
// Použijte $props pro definici vlastností (props) vystavených pro kontrolu
350-
// typů v šabloně. Vue specificky čte jejich definice z typu `$props`.
357+
// Použijte $props pro definici vlastností (props) vystavených pro typovou
358+
// kontrolu v šabloně. Vue specificky čte jejich definice z typu `$props`.
351359
// Pamatujte, že kombinujeme props elementu s globálními HTML atrbuty
352360
// a speciálními vlastnostmi Vue.
353361
/** @deprecated Nepoužívejte $props na Custom Element ref,
@@ -375,11 +383,10 @@ type VueEmit<T extends EventMap> = EmitFn<{
375383
```
376384
377385
:::tip Info
378-
Označili jsme `$props` a `$emit` jako deprecated, abychom při získání `ref` na custom element nebyli v pokušení tyto vlastnosti použít. Slouží totiž pouze k ověřování typů u&nbsp;custom elementů. Ve skutečnosti na instancích těchto elementů neexistují.
386+
Označili jsme `$props` a `$emit` jako deprecated, abychom při získání `ref` na custom element nebyli v pokušení tyto vlastnosti použít. Slouží totiž pouze k typové kontrole u&nbsp;custom elementů. Ve skutečnosti na instancích těchto elementů neexistují.
379387
:::
380388
381-
Prostřednictvím pomocné funkce nyní můžeme vybrat JavaScriptové vlastnosti,
382-
které mají být vystaveny pro typovou kontrolu ve Vue šablonách:
389+
Prostřednictvím pomocné funkce nyní můžeme vybrat JavaScriptové vlastnosti, které mají být vystaveny pro typovou kontrolu ve Vue šablonách:
383390
384391
```ts [some-lib/src/DefineCustomElement.ts]
385392
import {

0 commit comments

Comments
 (0)