Vue3中Script Setup与RevoGrid兼容问题求助

你的Script Setup代码和Options API代码并不等价，核心错误是把本地状态错误定义成了组件props，而非内部响应式变量，这和RevoGrid本身没有关系。

错误根源 #

Options API里的columns和rows是组件内部的本地状态（data选项），但你在Script Setup里用defineProps()声明它们——这代表你把它们当成了需要父组件传入的外部属性，而你的组件并没有接收这些外部props，导致模板中绑定的rows和columns实际是undefined，RevoGrid自然没有数据可渲染。

正确的Script Setup写法 #

直接用Vue3的ref定义内部响应式状态即可，无需注册组件（这部分你的理解是正确的）：

<script setup>
import VGrid from "@revolist/vue3-datagrid";
import { ref } from 'vue';

// 用ref定义响应式本地状态，等价于Options API的data选项
const columns = ref([{ prop: "name" }, { prop: "details" }]);
const rows = ref([
  { name: "Joe", details: "Stuff 1" },
  { name: "Jane", details: "Stuff 2" },
  { name: "John", details: "Stuff 3" }
]);
</script>

<template>
  <div id="revoEx">
    <VGrid
      theme="compact"
      :source="rows"
      :columns="columns"
    ></VGrid>
  </div>
</template>

补充说明 #

• RevoGrid完全支持Vue3组合式API，不存在特殊限制，问题仅出在你的状态定义方式错误。
• defineProps()仅用于声明父组件传递给当前组件的属性，组件内部的状态请用ref/reactive定义。

内容的提问来源于stack exchange，提问作者Shane Petroff