vue3中自定义元素交互的非兼容变更

自主定制元素

如果咱们先增加在Vue内部定义的自定义元素，如应用Web组件API，咱们须要批示Vue将其视为自定义元素：

<plastic-button></plastic-button>

// 在2.x中，将标记作为自定义元素白名单是通过Vue.config.ignoredElements// 这将使Vue疏忽在Vue内部定义的自定义元素// (例如：应用 Web Components API)Vue.config.ignoredElements = ['plastic-button']

// 在Vue3中，此查看在模板编译期间执行批示编译器将<plastic-button>视为自定义元素// 如果应用生成步骤：将 isCustomElement 传递给 Vue 模板编译器，如果应用 vue-loader，则应通过 vue-loader 的 compilerOptions 选项传递：// webpack配置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">点击我!</button>

Vue对is非凡prop的应用是在模仿native attribute在浏览器中广泛可用之前的作用，然而在2.x中，它被解释为一个名为plastic-button的Vue组件，浙江组织下面提到的自定义内置元素的原生应用
在3.0中，Vue对is属性的非凡解决被限度到<component>标签上
在保留的 <component> tag 上应用时，它的行为将与 2.x 中完全相同

• 在一般组件上应用时，他的行为将相似于一般prop

<foo is="bar" />在vue2中，将会渲染bar组件在vue3中，会通过is属性渲染foo组件

• 在一般元素上应用时，它将作为is选项传递给createElement调用，并作为原生属性渲染

<button is="plastic-button">点击我！</button>在vue2中，渲染plastic-button组件在vue3中，渲染原生button：document.createElement('button', { is: 'plastic-button' })

v-is用于DOM内模板解析解决方案

仅影响间接在页面的 HTML 中写入 Vue 模板的状况，在 DOM 模板中应用时，模板受原生 HTML 解析规定的束缚

<!-- 2.x --><table>  <tr is="blog-post-row"></tr></table><!-- 2.x --><!-- 随着is的行为变动，新的指令v-is用来解决当前情况 --><!-- 留神：v-is 函数像一个动静的 2.x :is 绑定——因而，要按注册名称渲染组件，其值应为 JavaScript 字符串文本 --><table>  <tr v-is="'blog-post-row'"></tr></table><!-- v-is绑定的是一个Javascript变量 --><!-- 不正确，不会渲染任何内容 --><tr v-is="blog-post-row"></tr><!-- 正确 --><tr v-is="'blog-post-row'"></tr>