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

Posted 2021-09-25 月岛蘑菇

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>