vue3中自定義元素交互的非兼容變動

vue3中自定義元素交互的非兼容變動

自主定製元素

若是咱們先添加在Vue外部定義的自定義元素，如使用Web組件API，咱們須要指示Vue將其視爲自定義元素：

<plastic-button></plastic-button>

// 在2.x中，將標記做爲自定義元素白名單是經過Vue.config.ignoredElements
// 這將使Vue忽略在Vue外部定義的自定義元素
// (例如：使用 Web Components API)
Vue.config.ignoredElements = ['plastic-button']

// 在Vue3中，此檢查在模板編譯期間執行指示編譯器將<plastic-button>視爲自定義元素
// 若是使用生成步驟：將 isCustomElement 傳遞給 Vue 模板編譯器，若是使用 vue-loader，則應經過 vue-loader 的 compilerOptions 選項傳遞：
// webpack配置
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">點擊我!</button>

Vue對is特殊prop的使用是在模擬native attribute在瀏覽器中廣泛可用以前的做用，可是在2.x中，它被解釋爲一個名爲plastic-button的Vue組件，浙江組織上面提到的自定義內置元素的原生使用
在3.0中，Vue對is屬性的特殊處理被限制到<component>標籤上
在保留的 <component> tag 上使用時，它的行爲將與 2.x 中徹底相同

• 在普通組件上使用時，他的行爲將相似於普通prop

<foo is="bar" />
在vue2中，將會渲染bar組件
在vue3中，會經過is屬性渲染foo組件

• 在普通元素上使用時，它將做爲is選項傳遞給createElement調用，並做爲原生屬性渲染

<button is="plastic-button">點擊我！</button>
在vue2中，渲染plastic-button組件
在vue3中，渲染原生button：
document.createElement('button', { is: 'plastic-button' })

v-is用於DOM內模板解析解決方案

僅影響直接在頁面的 HTML 中寫入 Vue 模板的狀況，在 DOM 模板中使用時，模板受原生 HTML 解析規則的約束

<!-- 2.x -->
<table>
  <tr is="blog-post-row"></tr>
</table>

<!-- 2.x -->
<!-- 隨着is的行爲變化，新的指令v-is用來解決當前狀況 -->
<!-- 注意：v-is 函數像一個動態的 2.x :is 綁定——所以，要按註冊名稱渲染組件，其值應爲 JavaScript 字符串文本 -->
<table>
  <tr v-is="'blog-post-row'"></tr>
</table>
<!-- v-is綁定的是一個Javascript變量 -->
<!-- 不正確，不會渲染任何內容 -->
<tr v-is="blog-post-row"></tr>
<!-- 正確 -->
<tr v-is="'blog-post-row'"></tr>