Vue 3 迁移策略笔记—— 第7节：自定义元素交互

前言

本笔记主要基于官方文档《迁移策略—— 自定义元素交互》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

概述

• 自定义元素（Vue 之外）白名单变为在模板编译期间执行；而且白名单应该通过编译器option配置而不是通过运行时的config来配置；
• Vue 2.x is 的用法，现只在 Vue 保留标签component中有效。
• 新增v-is来实现在普通的 HTML 元素渲染组件

添加 Vue 外的自定义元素

如果我们想要将 Vue 外部定义的自定义元素(例如使用 Web 组件 API)添加到 Vue 中，我们需要告诉 Vue 将其当作自定义元素来处理。简而言之，为需要为 Vue 外部定义的自定义元素，在 Vue 内注册个合法的“身份”。不然，Vue 就会报错。

例如，<plastic-button>是 Vue 外的一个自定义元素。我们想要在 Vue 中使用它：

<plastic-button></plastic-button>

如果不做特殊声明直接使用，控制台会报如下错误：

Vue 2.x 添加 Vue 外的自定义元素

在 Vue 2.x 中，我们可以通过Vue.config.ignoredElements来添加一个自定义元素白名单。对于白名单中的元素，Vue 就不会报错了。

Vue.config.ignoredElements = ['plastic-button']

ignoredElements

• 类型：Array<string | RegExp>

• 默认值：[]

• 用法：

Vue.config.ignoredElements = [
  'my-custom-web-component',
  'another-web-component',
  // 用一个 `RegExp` 忽略所有“ion-”开头的元素
  // 仅在 2.5+ 支持
  /^ion-/
]

须使 Vue 忽略在 Vue 之外的自定义元素 (e.g. 使用了 Web Components APIs)。否则，它会假设你忘记注册全局组件或者拼错了组件名称，从而抛出一个关于 Unknown custom element 的警告。

Vue 3.x 添加 Vue 外的自定义元素

在 Vue 3.x 中，对 Vue 外部定义的自定义元素做白名单声明，调整为模板编译期间进行。有两种写法：

• 如果使用构建工具创建 Vue 项目（例如：Vue CLI）：通过 vue-loader的compilerOptions来声明：

  // in webpack config
  rules: [
    {
      test: /\.vue$/,
      use: 'vue-loader',
      options: {
        compilerOptions: {
          isCustomElement: tag => tag === 'plastic-button'
        }
      }
    }
    // ...
  ]
  

• 如果使用动态模板编译，通过 app.config.isCustomElement 来声明：

  const app = Vue.createApp({})
  app.config.isCustomElement = tag => tag === 'plastic-button'
  

  值得注意的是，运行时配置只会影响运行时模板编译——它不会影响预编译模板。

另一种使用自定义元素的方法

自定义元素规范提供了一种将自定义元素用作自定义内置模板的方法，方法是向内置元素添加 is 属性：

<button is="plastic-button">Click Me!</button>

然而，在 Vue 2.x 中，上面代码被解释为：渲染plastic-button组件。

因此，Vue 3.x 对 is做了新的限制：

• 当在 Vue 保留的 component标签上使用is时，它的行为将与 Vue 2.x 中的一致；

  <component is="plastic-button">Click Me!</component>
  

• 当在不同组件标签上使用is时，is会被当做一个不同的prop;

  <bar is="plastic-button" />
  

• 当在普通的 HTML 元素上使用is，is将会被当做元素的属性。

  <button is="plastic-button">Click Me!</button>
  

新增v-is来实现在普通的 HTML 元素渲染组件

前面提及到，is在普通的 HTML 元素上不再被用作渲染组件的一种方法。但是，Vue 3.x 并不是要放弃这种使用方法。为此，Vue 3.x 新增了v-is，专门来实现在普通的 HTML 元素渲染组件。

<template>
	<div>
    <div v-is="'child'">渲染 child 组件</div>
	</div>
</template>

<script>
import child from '@/components/classANdStyle/child.vue'
export default {
  name: 'customElement',
  components:{
    child: child
  }
};
</script>

<div>将被child组件替代。

注意：v-is绑定值的写法。v-is需要通过组件的名称来渲染组件，所以其值应该是 JS 字符串。

<!-- 错误, 没有任何东西将被渲染 -->
<tr v-is="blog-post-row"></tr>

<!-- 正确 -->
<tr v-is="'blog-post-row'"></tr>

---

本系列目录

• Vue 3 迁移策略笔记—— 第1节：v-for 中的 Ref 数组

• Vue 3 迁移策略笔记—— 第2节：Async Components 异步组件

• Vue 3 迁移策略笔记—— 第3节：Attribute Coercion Behavior （属性强制行为）

• Vue 3 迁移策略笔记——第4节：$attrs 包括class&style

• Vue 3 迁移策略笔记—— 第5节：移除 $children

• Vue 3 迁移策略笔记—— 第6节：自定义指令

• Vue 3 迁移策略笔记—— 第7节：自定义元素交互

• Vue 3 迁移策略笔记—— 第8节：Data 选项

• Vue 3 迁移策略笔记—— 第9节：新增 emits 选项

• Vue 3 迁移策略笔记—— 第10节：事件 API

• Vue 3 迁移策略笔记—— 第11节：移除过滤器

• Vue 3 迁移策略笔记—— 第12节：片段

• Vue 3 迁移策略笔记—— 第13节：函数式组件

• Vue 3 迁移策略笔记—— 第14节：全局 API

• Vue 3 迁移策略笔记—— 第15节：全局 API 的 tree shaking

• Vue 3 迁移策略笔记—— 第16节：Inline Template 属性

• Vue 3 迁移策略笔记—— 第17节：Key 属性

• Vue 3 迁移策略笔记—— 第18节：按键修饰符

• Vue 3 迁移策略笔记—— 第19节：移除 $listeners

• Vue 3 迁移策略笔记—— 第20节：Props 的默认值函数不能访问this

• Vue 3 迁移策略笔记—— 第21节：渲染函数 API

• Vue 3 迁移策略笔记—— 第22节：Slots 的统一

• Vue 3 迁移策略笔记—— 第23节：Transition Class 的变化

• Vue 3 迁移策略笔记—— 第24节：Transition Group 不再需要设置根元素

• Vue 3 迁移策略笔记—— 第25节：v-on.native修饰符被移除

• Vue 3 迁移策略笔记—— 第26节：在组件上使用 v-model 的变化

• Vue 3 迁移策略笔记—— 第27节：v-if 和 v-for 的优先级

• Vue 3 迁移策略笔记—— 第28节：v-bind 合并行为

• Vue 3 迁移策略笔记—— 第29节：数组的监听