Vue 3.0 自定義元素交互

#概覽

• 非兼容：自定義元素白名單現在在模板編譯期間執(zhí)行，應該通過編譯器選項而不是運行時配置來配置。
• 非兼容：特定 is prop 用法僅限于保留的 <component> 標記。
• 新增：有了新的 v-is 指令來支持 2.x 用例，其中在原生元素上使用了 v-is 來處理原生 HTML 解析限制。

#自主定制元素

如果我們想添加在 Vue 外部定義的自定義元素 (例如使用 Web 組件 API)，我們需要“指示”Vue 將其視為自定義元素。讓我們以下面的模板為例。

<plastic-button></plastic-button>

#2.x 語法

在 Vue 2.x 中，將標記作為自定義元素白名單是通過 Vue.config.ignoredElements：

// 這將使Vue忽略在Vue外部定義的自定義元素
// (例如：使用 Web Components API)


Vue.config.ignoredElements = ['plastic-button']

#3.x 語法

在 Vue 3.0 中，此檢查在模板編譯期間執(zhí)行指示編譯器將 <plastic-button> 視為自定義元素：

• 如果使用生成步驟：將 isCustomElement 傳遞給 Vue 模板編譯器，如果使用 vue-loader，則應通過 vue-loader 的 compilerOptions 選項傳遞：

  // webpack 中的配置
  rules: [
    {
      test: /\.vue$/,
      use: 'vue-loader',
      options: {
        compilerOptions: {
          isCustomElement: tag => tag === 'plastic-button'
        }
      }
    }
    // ...
  ]

• 如果使用動態(tài)模板編譯，請通過 app.config.isCustomElement 傳遞：

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

需要注意的是，運行時配置只會影響運行時模板編譯——它不會影響預編譯的模板。

#定制內置元素

自定義元素規(guī)范提供了一種將自定義元素用作自定義內置模板的方法，方法是向內置元素添加 is 屬性：

<button is="plastic-button">點擊我!</button>

Vue 對 is 特殊 prop 的使用是在模擬 native attribute 在瀏覽器中普遍可用之前的作用。但是，在 2.x 中，它被解釋為渲染一個名為 plastic-button 的 Vue 組件，這將阻止上面提到的自定義內置元素的原生使用。

在 3.0 中，我們僅將 Vue 對 is 屬性的特殊處理限制到 <component> tag。

• 在保留的 <component> tag 上使用時，它的行為將與 2.x 中完全相同；

• 在普通組件上使用時，它的行為將類似于普通 prop：

  <foo is="bar" />

• 2.x 行為：渲染 bar 組件。
• 3.x 行為：通過 is prop 渲染 foo 組件。

• 在普通元素上使用時，它將作為 is 選項傳遞給 createElement 調用，并作為原生 attribute 渲染，這支持使用自定義的內置元素。

  <button is="plastic-button">點擊我！</button>

• 2.x 行為：渲染 plastic-button 組件。

• 3.x 行為：通過回調渲染原生的 button。

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

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

提示：本節(jié)僅影響直接在頁面的 HTML 中寫入 Vue 模板的情況。 在 DOM 模板中使用時，模板受原生 HTML 解析規(guī)則的約束。一些 HTML 元素，例如 <ul&，<ol&，<table& 和 <select& 對它們內部可以出現的元素有限制，和一些像 <li&，<tr&，和 <option& 只能出現在某些其他元素中。

#2x 語法

在 Vue 2 中，我們建議通過在原生 tag 上使用 is prop 來解決這些限制：

<table>
  <tr is="blog-post-row"></tr>
</table>

#3.x 語法

隨著 is 的行為變化，我們引入了一個新的指令 v-is，用于解決這些情況：

<table>
  <tr v-is="'blog-post-row'"></tr>
</table>

WARNING

v-is 函數像一個動態(tài)的 2.x :is 綁定——因此，要按注冊名稱渲染組件，其值應為 JavaScript 字符串文本：

<!-- 不正確，不會渲染任何內容 -->
<tr v-is="blog-post-row"></tr>


<!-- 正確 -->
<tr v-is="'blog-post-row'"></tr>

#遷移策略

• 替換 config.ignoredElements 與 vue-loader 的 compilerOptions (使用 build 步驟) 或 app.config.isCustomElement (使用動態(tài)模板編譯)
• 將所有非 <component> tags 與 is 用法更改為 <component is="..."> (對于 SFC 模板) 或 v-is (對于 DOM 模板)。