>[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> ~~~