vue3中的defineCustomElement的使用

发表于 | 分类于 ，

偶然发现vue的文档中的有这样一个api：defineCustomElement
尝试了很久，才明白用法，在这里分享一下：

1.修改配置

vite.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
plugins: [
    vue({
      template: {
        compilerOptions: {
          // 将所有带短横线的标签名都视为自定义元素
          isCustomElement: (tag) => tag.includes('-')
        }
      }
    }),
    vueJsx()
  ],
resolve: {
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js'
    }
}

这里是vite的配置，其他方式参考官网

2.创建自定义元素

  • 方式一
    新建list/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // 这里是同平常一样的 Vue 组件选项
  props: {
    title: String
  },
  emits: {},
  template: `<div>{{title}}</div>`,

  // defineCustomElement 特有的：注入进 shadow root 的 CSS，行内样式
  styles: [`
    div {
      color: red
    }
  `]
})

// 注册自定义元素
// 注册之后，所有此页面中的 `<my-vue-element>` 标签
// 都会被升级
customElements.define('my-vue-element', MyVueElement)

export default MyVueElement
  • 方式二
    新建list/ui.ce.vue,文件内容如下：
1
2
3
4
5
6
7
8
<template>
  <div>测试 {{ title }}</div>
</template>
<script setup lang="ts">
defineProps({
  title: String
})
</script>
在`list/index.js`中引入：

1
2
3
4
5
6
7
8
9
10
import { defineCustomElement } from 'vue'
import UI from "./ui.ce.vue"
const MyVueElement = defineCustomElement(UI)

// 注册自定义元素
// 注册之后，所有此页面中的 `<my-vue-element>` 标签
// 都会被升级
customElements.define('my-vue-element', MyVueElement)

export default MyVueElement

注册组件

main.js

1
2
import MyVueElement from "./views/defineCustomElement"

使用

  • 直接在vue或者html文件中使用
1
<my-vue-element title="方式一"></my-vue-element>
  • 在js中
1
2
3
4
5
6
document.body.appendChild(
  new MyVueElement({
    // 初始化 props（可选）
    title: '方式三'
  })
)

虽然大概了解了这个api的用法，还有些疑惑

  1. app.config.compilerOptions.isCustomElement = (tag) => tag.includes('-')这个配置在什么场景生效
  2. 使用场景有哪些

参考文章