如何在Vue 3中结合ESM导入使用RevoGrid组件

你代码中的核心问题 #

1. 错误地将defineCustomElements()作为Vue组件注册到components选项中——它是用来注册原生Web Component的方法，不需要在Vue组件列表中声明。
2. 使用了自定义的<v-grid>标签，而RevoGrid的Web Component原生标签是<revo-grid>。
3. Vue默认会把绑定的属性转为DOM attribute（仅支持字符串），无法直接传递数组/对象给Web Component的property。

正确实现步骤及代码 #

1. 注册Web Component

直接调用defineCustomElements()注册RevoGrid，无需在Vue的components中声明。若需兼容旧浏览器，可搭配applyPolyfills()。

2. 配置Vue识别自定义元素

告诉Vue哪些标签是原生Web Component，避免编译警告或错误。

3. 正确使用标签与绑定属性

使用<revo-grid>原生标签，通过.prop修饰符传递数组/对象类型的属性（确保Vue直接绑定到元素的property而非DOM attribute）。

完整代码示例：

<script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3.2.45/dist/vue.esm-browser.js",
        "@revolist/revogrid/loader": "https://unpkg.com/@revolist/revogrid@latest/loader"
      }
    }
</script>
<script type="module">
    import { createApp } from 'vue'
    import { applyPolyfills, defineCustomElements } from "@revolist/revogrid/loader"

    // 注册RevoGrid Web Component（兼容旧浏览器需先执行polyfill）
    applyPolyfills().then(() => {
        defineCustomElements()
    })

    const app = createApp({
        data() {
            return {
                message: 'Hello World!',
                columns: [{ prop: "name" }, { prop: "details" }],
                rows: [{
                    name: "1",
                    details: "Item 1",
                }]
            }
        }
    })

    // 配置Vue识别以revo-开头的自定义元素
    app.config.isCustomElement = tag => tag.startsWith('revo-')

    app.mount('#app');
</script>

<div id="app">
    <h1>{{ message }}</h1>
    <revo-grid 
        theme="compact"
        :source.prop="rows"
        :columns.prop="columns"
    />
</div>

关键说明 #

• 标签名: 必须使用<revo-grid>，这是RevoGrid Web Component的标准名称。
• 属性绑定: 对于source、columns这类复杂类型的属性，必须添加.prop修饰符，否则Vue会将数组/对象转为字符串传递，导致组件无法正常接收数据。
• 自定义元素配置: app.config.isCustomElement用于告知Vue哪些标签是原生Web Component，避免将其当作Vue组件编译，防止出现"Unknown custom element"警告。

内容的提问来源于stack exchange，提问作者Donny V.