赞
踩
本笔记主要基于官方文档《迁移策略—— 自定义元素交互》汇总而来。如有理解出入,请以官方文档为主。建议您以官方文档为主,本文为辅。这样您可以“以自己为主”审视的阅读,从而不被我的观点带偏。
option
配置而不是通过运行时的config
来配置;is
的用法,现只在 Vue 保留标签component
中有效。v-is
来实现在普通的 HTML 元素渲染组件如果我们想要将 Vue 外部定义的自定义元素(例如使用 Web 组件 API)添加到 Vue 中,我们需要告诉 Vue 将其当作自定义元素来处理。简而言之,为需要为 Vue 外部定义的自定义元素,在 Vue 内注册个合法的“身份”。不然,Vue 就会报错。
例如,<plastic-button>
是 Vue 外的一个自定义元素。我们想要在 Vue 中使用它:
<plastic-button></plastic-button>
如果不做特殊声明直接使用,控制台会报如下错误:
在 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-/ ]
- 1
- 2
- 3
- 4
- 5
- 6
- 7
须使 Vue 忽略在 Vue 之外的自定义元素 (e.g. 使用了 Web Components APIs)。否则,它会假设你忘记注册全局组件或者拼错了组件名称,从而抛出一个关于
Unknown custom element
的警告。
在 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>
- 1
- 2
- 3
- 4
- 5
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。