You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/extras/web-components.md
+14-7Lines changed: 14 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -218,6 +218,7 @@ Pokud budou custom elementy použity v aplikaci, která Vue také používá, m
218
218
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ů:
219
219
220
220
```js [elements.js]
221
+
221
222
import { defineCustomElement } from'vue'
222
223
importFoofrom'./MyFoo.ce.vue'
223
224
importBarfrom'./MyBar.ce.vue'
@@ -235,11 +236,13 @@ export function register() {
235
236
```
236
237
237
238
Konzument může elementy použít ve Vue souboru:
239
+
238
240
```vue
239
241
<script setup>
240
242
import { register } from 'path/to/elements.js'
241
243
register()
242
244
</script>
245
+
243
246
<template>
244
247
<my-foo ... >
245
248
<my-bar ... ></my-bar>
@@ -248,10 +251,13 @@ register()
248
251
```
249
252
250
253
Nebo v jakémkoliv jiném frameworku, například s využitím JSX a custom názvy:
254
+
251
255
```jsx
252
256
import { MyFoo, MyBar } from'path/to/elements.js'
257
+
253
258
customElements.define('some-foo', MyFoo)
254
259
customElements.define('some-bar', MyBar)
260
+
255
261
exportfunctionMyComponent() {
256
262
return<>
257
263
<some-foo ...>
@@ -265,7 +271,9 @@ export function MyComponent() {
265
271
266
272
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.
267
273
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 [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:
269
277
270
278
```typescript
271
279
import { defineCustomElement } from'vue'
@@ -293,7 +301,7 @@ declare module 'vue' {
293
301
294
302
## Web Components a TypeScript {#non-vue-web-components-and-typescript}
295
303
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.
297
305
298
306
:::tip Info
299
307
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.
// 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`.
351
359
// Pamatujte, že kombinujeme props elementu s globálními HTML atrbuty
352
360
// a speciálními vlastnostmi Vue.
353
361
/**@deprecated Nepoužívejte $props na Custom Element ref,
@@ -375,11 +383,10 @@ type VueEmit<T extends EventMap> = EmitFn<{
375
383
```
376
384
377
385
:::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 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 custom elementů. Ve skutečnosti na instancích těchto elementů neexistují.
379
387
:::
380
388
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:
0 commit comments