Skip to content
This repository was archived by the owner on Aug 8, 2022. It is now read-only.

docs: Update custom-elements-interop.md #723

Merged
merged 1 commit into from
Sep 11, 2021
Merged
Changes from all commits
Commits
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
14 changes: 7 additions & 7 deletions src/guide/migration/custom-elements-interop.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ badges:
## 概览

- **非兼容**:检测并确定哪些标签应该被视为自定义元素的过程,现在会在模板编译期间执行,且应该通过编译器选项而不是运行时配置来配置。
- **非兼容**:特殊的 `is` prop 的使用被严格限制在保留的 `<component>` 标签中。
- **非兼容**:特殊的 `is` attribute 的使用被严格限制在保留的 `<component>` 标签中。
- **新增**:为了支持 2.x 在原生元素上使用 `is` 的用例来处理原生 HTML 解析限制,我们用 `vue:` 前缀来解析一个 Vue 组件。

## 自主定制元素
Expand Down Expand Up @@ -69,21 +69,21 @@ Vue.config.ignoredElements = ['plastic-button']
<button is="plastic-button">点击我!</button>
```

在原生 attribute 于浏览器中普遍可用之前,Vue 对 `is` 这个特殊 prop 的使用就已经在模拟其行为。但是,在 2.x 中,它将被解释为渲染一个名为 `plastic-button` 的 Vue 组件,这将阻碍上面所提到的自定义内置元素的原生用法。
在原生 attribute 于浏览器中普遍可用之前,Vue 对 `is` 这个特殊 attribute 的使用就已经在模拟其行为。但是,在 2.x 中,它将被解释为渲染一个名为 `plastic-button` 的 Vue 组件,这将阻碍上面所提到的自定义内置元素的原生用法。

在 3.0 中,我们将 Vue 对 `is` prop 的特殊处理限制在了 `<component>` 标签中。
在 3.0 中,我们将 Vue 对 `is` attribute 的特殊处理限制在了 `<component>` 标签中。

- 在保留的 `<component>` 标签上使用时,它的行为将与 2.x 中完全相同;
- 在普通组件上使用时,它的行为将类似于普通 prop
- 在普通组件上使用时,它的行为将类似于普通 attribute

```html
<foo is="bar" />
```

- 2.x 的行为:渲染 `bar` 组件。
- 3.x 的行为:渲染 `foo` 组件,并将 `is` prop 传递给它。
- 3.x 的行为:渲染 `foo` 组件,并将 `is` attribute 传递给它。

- 在普通元素上使用时,它将作为 `is` prop 传递给 `createElement` 调用,并作为原生 attribute 渲染。这支持了自定义内置元素的用法。
- 在普通元素上使用时,它将作为 `is` attribute 传递给 `createElement` 调用,并作为原生 attribute 渲染。这支持了自定义内置元素的用法。

```html
<button is="plastic-button">点击我!</button>
Expand All @@ -105,7 +105,7 @@ Vue.config.ignoredElements = ['plastic-button']

### 2.x 语法

在 Vue 2 中,我们建议在原生标签上使用 `is` prop 来绕过这些限制:
在 Vue 2 中,我们建议在原生标签上使用 `is` attribute 来绕过这些限制:

```html
<table>
Expand Down