Vue.js defineCustomElement()用法及代碼示例

此方法接受與 defineComponent 相同的參數，但返回本機 Custom Element 類構造函數。

類型

function defineCustomElement(
  component:
    | (ComponentOptions & { styles?: string[] })
    | ComponentOptions['setup']
): {
  new (props?: object): HTMLElement
}

為了便於閱讀，簡化了類型。

細節

除了普通的組件選項之外，defineCustomElement() 還支持一個特殊選項 styles ，它應該是一個內聯 CSS 字符串數組，用於提供應該注入元素陰影根的 CSS。

返回值是可以使用 customElements.define() 注冊的自定義元素構造函數。

示例

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  /* component options */
})

// Register the custom element.
customElements.define('my-vue-element', MyVueElement)

相關用法

注：本文由純淨天空篩選整理自vuejs.org大神的英文原創作品 defineCustomElement()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。