当前位置: 首页 > Web前端 > vue.js

vue3中自定义元素交互不兼容更改

时间:2023-03-31 23:11:49 vue.js

vue3中自定义元素交互的不兼容变化自治自定义元素如果我们首先添加一个在Vue之外定义的自定义元素,比如使用WebComponentsAPI,我们需要指示Vue将其视为自定义元素://在2.x中,将标签作为自定义元素列入白名单是通过Vue.config.ignoredElements//这将使Vue忽略在Vue之外定义的自定义元素//(例如:使用WebComponentsAPI)Vue.config.ignoredElements=['plastic-button']//在Vue3中,此检查在模板编译期间执行,以指示编译器将视为自定义元素//如果使用构建步骤:将isCustomElement传递给Vue模板编译器。如果你使用vue-loader,你应该通过vue-loader的compilerOptions选项传递它://webpackconfigurationrules:[{test:/\.vue$/,use:'vue-loader',options:{compilerOptions:{isCustomElement:tag=>tag==='plastic-button'}}}//...]//如果使用动态模板编译,则传递app.config.isCustomElement//在运行时配置仅影响运行时模板编译-它不影响预编译模板。constapp=Vue.createApp({})app.config.isCustomElement=tag=>tag==='plastic-button'定义一个内置元素自定义元素规范提供了一种使用自定义元素作为自定义元素的方法-intemplate方法是给内置元素添加is属性:点我!Vue使用is特殊prop是为了模拟原生属性的作用在它们在浏览器中普遍可用之前。但在2.x中它被解释为一个名字对于plastic-button这个vue组件,浙江组织上面提到的自定义内置元素的原生使用在3.0中,vue对is属性的特殊处理仅限于在保留的上使用标签tag,它的行为与在2.x中完全相同当用于普通组件时,它的行为与普通prop在vue2中,它将渲染bar组件在vue3中,它将渲染foo组件通过is属性在普通元素上使用时,它将作为is选项传递给createElement调用,并呈现为原生点击我!在vue2中,渲染plastic-button组件在vue3中,渲染原生按钮:document.createElement('button',{is:'plastic-button'})v-is用于DOM中的模板解析方案只影响页面的HTML中直接写Vue模板的情况。在DOM模板中使用时,模板受制于原生HTML解析规则