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()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。