>[success] # 自定义元素交互 ~~~ 1.非兼容：自定义元素白名单现在在模板编译期间执行，应该通过编译器选项而不是运行时配置来配置。 2.非兼容：特定 is prop 用法仅限于保留的 <component> 标记。 3.新增：有了新的 v-is 指令来支持 2.x 用例，其中在原生元素上使用了 v-is 来处理原生 HTML 解析限制。 ~~~ >[info] ## 对自定义元素做说明 ~~~ 1.现在我们引入了一标签'<plastic-button></plastic-button>' 这个标签是通过'Web components' 编写的， 'Web Components' 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外） 并且在您的web应用中使用它们。如果将这个标签直接引入到vue 就会出现如图的报错，说你没有注册 该组件，但是显然这个标签不是vue是我们利用web新特性自己编写的因此需要告诉vue这个不是根据 vue规则定义组件是一类特殊的标签 ~~~ * 如图  >[info] ## 2.x ~~~ 1.在 Vue 2.x 中，将标记作为自定义元素白名单是通过 Vue.config.ignoredElements Vue.config.ignoredElements = ['plastic-button'] ~~~ >[info] ## 3.x ~~~ 1. 3.x 给出两种方式配置帮助vue 不处理这类自定义元素 1.1.如果使用生成步骤：将 isCustomElement 传递给 Vue 模板编译器，如果使用 vue-loader，则应通过 vue-loader 的 compilerOptions 选项传递： // webpack 中的配置 rules: [ { test: /\.vue$/, use: 'vue-loader', options: { compilerOptions: { isCustomElement: tag => tag === 'plastic-button' } } } // ... ] 1.2.如果使用动态模板编译，请通过 app.config.isCustomElement 传递： const app = Vue.createApp({}) app.config.isCustomElement = tag => tag === 'plastic-button' ~~~ >[success] # 使用is 定义 ~~~ 1.is用于动态组件且基于 DOM 内模板的限制来工作，简单理解动态生成组件 ~~~ >[info] ## vue2.x ~~~ 1.在vue 2.x 使用is 一般可以使用'<component> tag'或者其他任意'html tag'和在普通组件 三者最后渲染效果是一样的 <ul is='my-button'/> <components is='my-button'/> <!--我是原本是foo组件但是你用了is 我被渲染成bar组件了--> <foo is="bar" /> ~~~ >[info] ## vue3.x ~~~ 1.vue3.x 想配合is生成动态组件你只能使用'<component> tag' 标签，简单的说在保留的 <component> tag 上使用时，它的行为将与 2.x 中完全相同 2.在vue3.x 中在'html tag' 和 组件上使用is 将有新的含义 2.1.在普通组件上使用时，它的行为将类似于普通 prop 2.2.在普通元素上使用时，它将作为 is 选项传递给 createElement 调用，并作为原生 attribute 渲染 ~~~ >[danger] ##### vue3.x 引入了新的指令v-is ~~~ 1.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> ~~~ * 注意v-is绑定值的写法。v-is需要通过组件的名称来渲染组件，所以其值应该是 JS 字符串 ~~~ <!-- 错误, 没有任何东西将被渲染 要用字符串--> <tr v-is="blog-post-row"></tr> <!-- 正确 --> <tr v-is="'blog-post-row'"></tr> ~~~