Skip to content

docs: replace the NOTE block in web-components.md #1064

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

docs: replace the NOTE block in web-components.md #1064

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b5e896
docs: replace the NOTE block in web-components.md
veaba Feb 23, 2025
d8604ca
Update web-components.md
veaba Feb 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions src/guide/extras/web-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,10 +306,11 @@ declare module 'vue' {

以下是在非 Vue 构建的自定义元素的 SFC 模板中启用类型检查的推荐方法。

> [!Note]
> 这种方法是实现该功能的一种可能方式
> 但具体实现可能因创建自定义元素所用的框架而异。

:::tip 注意
- 这种方法是实现该功能的一种可能方式
- 但具体实现可能因创建自定义元素所用的框架而异。
:::

假设我们有一个自定义元素，其中定义了一些 JS 属性和事件，并且它发布在名为 `some-lib` 的库中：

```ts
Expand Down Expand Up @@ -389,11 +390,12 @@ type VueEmit<T extends EventMap> = EmitFn<{
}>
```

> [!Note]
> 我们将 `$props` 和 `$emit` 标记为已弃用，
> 以便当我们获取自定义元素的 `ref` 时，我们不会被诱导使用这些属性，
> 因为这些属性在自定义元素的情况下仅用于类型检查。
> 这些属性实际上并不存在于自定义元素实例上。
:::tip 注意
- 我们将 `$props` 和 `$emit` 标记为已弃用，
- 以便当我们获取自定义元素的 `ref` 时，我们不会被诱导使用这些属性，
- 因为这些属性在自定义元素的情况下仅用于类型检查。
- 这些属性实际上并不存在于自定义元素实例上。
:::

使用类型助手，我们现在可以选择在 Vue 模板中应暴露的 JS 属性进行类型检查：

Expand Down