Vue 3.0 自定义元素交互
创始人
2025-05-29 22:19:09

#概览

  • 非兼容：自定义元素白名单现在在模板编译期间执行，应该通过编译器选项而不是运行时配置来配置。
  • 非兼容：特定 is prop 用法仅限于保留的  标记。
  • 新增：有了新的 v-is 指令来支持 2.x 用例，其中在原生元素上使用了 v-is 来处理原生 HTML 解析限制。

#自主定制元素

如果我们想添加在 Vue 外部定义的自定义元素 (例如使用 Web 组件 API)，我们需要“指示”Vue 将其视为自定义元素。让我们以下面的模板为例。

 



 

#2.x 语法
 

在 Vue 2.x 中，将标记作为自定义元素白名单是通过 Vue.config.ignoredElements：
 

 

 

  1. // 这将使Vue忽略在Vue外部定义的自定义元素
  2. // (例如：使用 Web Components API)
  5. Vue.config.ignoredElements = ['plastic-button']


 

#3.x 语法
 

在 Vue 3.0 中，此检查在模板编译期间执行指示编译器将  视为自定义元素：
 

 

  • 如果使用生成步骤：将 isCustomElement 传递给 Vue 模板编译器，如果使用 vue-loader，则应通过 vue-loader 的 compilerOptions 选项传递：


 

 

  1. // webpack 中的配置
  2. rules: [
  3. {
  4. test: /\.vue$/,
  5. use: 'vue-loader',
  6. options: {
  7. compilerOptions: {
  8. isCustomElement: tag => tag === 'plastic-button'
  9. }
  10. }
  11. }
  12. // ...
  13. ]


 

  • 如果使用动态模板编译，请通过 app.config.isCustomElement 传递：


 

 

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


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

 

#定制内置元素
 

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

 

 



Vue 对 is 特殊 prop 的使用是在模拟 native attribute 在浏览器中普遍可用之前的作用。但是，在 2.x 中，它被解释为渲染一个名为 plastic-button 的 Vue 组件，这将阻止上面提到的自定义内置元素的原生使用。
 

在 3.0 中，我们仅将 Vue 对 is 属性的特殊处理限制到  tag。
 

 

  • 在保留的  tag 上使用时，它的行为将与 2.x 中完全相同；


 

  • 在普通组件上使用时，它的行为将类似于普通 prop：


 

 



 

  • 2.x 行为：渲染 bar 组件。
  • 3.x 行为：通过 is prop 渲染 foo 组件。


 

  • 在普通元素上使用时，它将作为 is 选项传递给 createElement 调用，并作为原生 attribute 渲染，这支持使用自定义的内置元素。


 

 



 

  • 2.x 行为：渲染 plastic-button 组件。


 

  • 3.x 行为：通过回调渲染原生的 button。


 

 

  1. document.createElement('button', { is: 'plastic-button' })


 

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

 

 
提示：本节仅影响直接在页面的 HTML 中写入 Vue 模板的情况。 在 DOM 模板中使用时，模板受原生 HTML 解析规则的约束。一些 HTML 元素，例如 ，， 和  对它们内部可以出现的元素有限制，和一些像 ，，和  只能出现在某些其他元素中。
 

 

 

#2x 语法
 

在 Vue 2 中，我们建议通过在原生 tag 上使用 is prop 来解决这些限制：
 

 

 



 

#3.x 语法
 

随着 is 的行为变化，我们引入了一个新的指令 v-is，用于解决这些情况：
 

 

 



WARNING
 

v-is 函数像一个动态的 2.x :is 绑定——因此，要按注册名称渲染组件，其值应为 JavaScript 字符串文本：
 

 

 



 

#迁移策略
 

 

  • 替换 config.ignoredElements 与 vue-loader 的 compilerOptions (使用 build 步骤) 或 app.config.isCustomElement (使用动态模板编译)
  • 将所有非  tags 与 is 用法更改为  (对于 SFC 模板) 或 v-is (对于 DOM 模板)。
                
            

            
            

                
                
                词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。
                            

            

                

                    上一篇：Portal认证讲解

                

                

                    下一篇：灵魂舵手凌克离舰，“金地系”巨轮能否驶过“双亏”风浪 灵魂舵手完整版 灵魂舵手                

            

            
            

                
                
相关内容

                
            

            

            
            

                

            



        

        
    

    

    
    

        
        

            
            

                
                

                    
                    

                        
                        热门资讯
                        
                    

                    
                

                
            

            
            
            


                                
                

                    
                    

                        

                    

                    
                    
                    

                        springboot第一集：由...
                        DTO: Data Transfer Object. 通常是在 OpenApi . 即此项目与其他外...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        安全防御实验 --- 防火墙（...
                        准备工作：  （1）云服务配置：  ...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        AI为什么还没有替代你的工作？
                        我是由字节跳动公司独立研发训练的 AI 豆包呀。我之所以还没有替代人类的工作，主要有以下原因。首先，...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        消费端助推 酒业ESG进入发展...
                        中国商报（记者 周子荑 文/图）随着人们环保意识增强，绿色低碳消费逐渐深入人心，品牌方纷纷通过使用环...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        碳汇投资“锁”在系统里，甘肃碳...
                        5月22日，新京报贝壳财经记者刊发了《交易中心休市一年，碳汇投资“锁”在系统里》报道，多位投资人称接...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        欢聚集团营收同比下滑12.4％...
                        本报（chinatimes.net.cn）记者胡梦然 深圳报道卖掉YY直播，在纳斯达克的股票代码将从...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        C语言实现链表
                        目录 一，链表与单链表的比较 二，创建链表节点 三，接口实...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        JVM学习.01 内存模型
                        1、前言对于C、C++程序员来说，在内存管理领域，他们拥...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        驭势科技冲港股：年入2.66亿...
                        文|恒心来源|博望财经自动驾驶赛道再添上市新军。2025年5月28日，驭势科技正式向港交所递交招股书...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        Web自动化框架断言方法实现
                        前言1、设计用例方法关键字1.1、获取元素属性值2.1、断言2、代码实现2.1、实现获取元素属性值2...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        广西广电：不再经营广电相关业务...
                        5月30日，广西广播电视信息网络股份有限公司（以下简称“广西广电”）发布重大资产置换暨关联交易报告书...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        万达广场，王健林的套现中心 王...
                        作者丨铁手编辑丨坚果封面来源丨Unsplash近两年，但凡关于万达以及王健林的消息，几乎都不是什么好...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        使用Visual Studio...
                        C++调用Matlab傅里叶变换程序  封装一个Matlab函数脚本newfft.m，这里使用两个返...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        福建确定了！2025年继续提高...
                        继上海、湖北之后，又一省份明确提高养老金，它就是福建。5月28日，福建省政府办公厅发布《福建省提振消...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        农历到底有多强？一文读懂！我们...
                        你现在看到的是一张非常普通的2023年日历，它包含两套日期记载系统，一个...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        中国银行取得银行网点投放产品的...
                        金融界2025年5月30日消息，国家知识产权局信息显示，中国银行股份有限公司取得一项名为“银行网点投...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        中国仿石漆在国际上的影响力
                        中国仿石漆不仅是行业技术革新的成果，更是中国制造业国际竞争力提升的缩影。   1、环保理念与全球趋势...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        ETO MARKETS：佛州“...
                        在美国债务危机持续发酵的背景下，佛罗里达州正以立法形式重塑货币秩序。州长罗恩·德桑蒂斯于5月27日签...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        景顺长城基金，董事长换人
                        本文自南都·湾财社。 采写 | 南都·湾财社记者 罗曼瑜 5月29日晚间，景顺长城基金管理有限公司（...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        三花智控：5月29日融资买入1...
                        证券之星消息，5月29日，三花智控（002050）融资买入1.25亿元，融资偿还1.88亿元，融资净...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        乐山电力：5月29日融资买入8...
                        证券之星消息，5月29日，乐山电力（600644）融资买入8706.32万元，融资偿还2.23亿元，...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        计算机中的浮点数运算
                        计算机中的浮点数   计算机中以固定长度存储浮点数的方式，造成了浮点数运算过程容易产生...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        【午盘】A股早盘弱势震荡收跌，...
                        A股三大股指5月30日集体低开。早盘两市探底回升，三大股指跌势明显，个股呈现普跌态势。从盘面上看，可...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        只剩几面烂墙的别墅及土地使用权...
                        红星资本局5月30日消息，近日，在京东资产交易平台上，一栋存在瑕疵的别墅（国有建设用地使用权部分）进...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        C/C++每日一练(20230...
                        目录 1. 反转链表 II  🌟🌟 2. 解码方法  ἱ...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        Java8新特性(三)Opti...
                        一，Optional类的作用使用Optional类对其他类进行包装，防止...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        STM32学习（四）
                        STM32CubeMX简介 STM32CubeMX是ST开发的一款图形配置工具，可通过...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        监管鼓励不良资产转让 上半年消...
                        在监管机构鼓励不良资产转让的大背景下，今年以来，消费金融行业不良资产转让市场持续升温。 截至5月29...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        手写vue（二）响应式实现
                        名词解释：vm：指Vue实例一、目标效果vue定义（1&#...
                    

                    
                

                                
                

                    
                    

                        

                    

                    
                    
                    

                        680亿！斯凯奇“卖身”退市，...
                        是危机还是转机？全球鞋业领域迎来一则重磅消息——迄今为止最大的一笔收购案诞生，斯凯奇选择“卖身”并宣...