1. 从“能用”到“好用”：为什么我们需要自定义组件与设计器面板

在任何一个前端开发者的工具箱里，Vue 3 组件库都像是一套标准化的乐高积木。它们设计精良、接口统一，能快速搭建出符合规范的应用界面。然而，当我们面对千变万化的业务需求时，这套“标准积木”的局限性就暴露无遗了。比如，产品经理突然要求在一个表单里嵌入一个复杂的、带实时预览的富文本签名板；或者运营同学希望后台能动态配置一个展示特定数据结构的、带有交互动画的卡片。这时候，如果只能等待框架官方更新，或者自己从头手写一个与设计器环境格格不入的“野组件”，开发效率和体验都会大打折扣。

这正是 VTJ Designer 这类低代码/智能设计平台的核心价值所在：它不仅要让你“能用”标准组件快速搭建，更要让你能“好用”地扩展和定制，将独特的业务逻辑封装成与平台原生体验一致的一等公民。自定义组件和设计器面板，就是实现这一目标的两把关键钥匙。前者解决了“功能如何实现”的问题，将你的业务代码无缝接入平台；后者则解决了“功能如何配置”的问题，为你的组件提供一个可视化、易操作的“控制台”。这不仅仅是技术功能的堆砌，而是一种开发范式的转变——从在框架约束下编码，转变为用代码去扩展和定义框架本身的能力边界。

最近，随着 AI 编程助手和 AI Agent 概念的升温，很多人开始讨论 AI 能否替代前端开发。但在我看来，AI 目前更擅长的是在既定模式和规范下的效率提升，比如根据描述生成标准组件代码。而真正的业务创新、那些非标准的、充满领域知识的复杂交互模块，依然需要开发者深度参与。自定义组件与设计器面板的能力，恰恰是将开发者的领域知识（Domain Knowledge）和创造性工作，进行标准化封装和复用的最佳实践。它让开发者能聚焦于业务逻辑本身，而将组件注册、属性配置、事件绑定、样式隔离等繁琐的“平台适配工作”交给框架。当你成功封装并发布一个自定义组件后，它甚至可以被团队内其他不熟悉底层代码的同学，通过拖拽和点选来使用，这本身就是一种知识沉淀和效率革命。

2. 自定义组件：将你的业务代码变为平台原生能力

自定义组件是 VTJ Designer 扩展能力的基石。它的目标很明确：让你用开发普通 Vue 3 组件几乎相同的体验，开发出一个能在设计器画布上被拖拽、配置、预览的“智能积木”。这个过程并非黑盒魔法，而是遵循一套清晰的契约。理解这套契约，是成功扩展的第一步。

2.1 核心契约：defineVTJComponent与组件描述符

与 Vue 3 的defineComponent相对应，VTJ 提供了defineVTJComponent函数来声明一个平台可识别的自定义组件。这个函数接收一个“组件描述符”对象，这个对象定义了组件的一切元信息。

import { defineVTJComponent } from '@vtj/designer'; import MyBusinessComponent from './MyBusinessComponent.vue'; export default defineVTJComponent({ // 组件名，在设计器组件库中显示 name: 'MyBusinessChart', // 关联的 Vue 组件 widget: MyBusinessComponent, // 组件类型，影响分组和图标 type: 'chart', // 组件默认尺寸 defaultSize: { width: 400, height: 300 }, // 属性定义：组件暴露给设计器的可配置项 props: { title: { type: 'string', label: '图表标题', default: '业务数据图表' }, dataUrl: { type: 'string', label: '数据接口', default: '/api/chart/data' }, showLegend: { type: 'boolean', label: '显示图例', default: true } }, // 事件定义：组件可以触发的行为 emits: { 'data-loaded': { label: '数据加载完成' }, 'click-item': { label: '点击图表项' } }, // 插槽定义：允许嵌套其他组件 slots: { default: { label: '默认内容' }, header: { label: '头部区域' } } });

这个描述符是连接你的业务组件和设计器世界的桥梁。props字段尤为关键，它定义的每一个属性，都会在设计器右侧的面板中生成一个对应的配置控件。type字段支持string、number、boolean、array、object等，甚至可以引用自定义的复杂编辑器。

注意：props中定义的属性名，必须与你 Vue 组件内部通过defineProps声明的属性名完全一致。平台会通过这个映射关系，将设计器中配置的值动态注入到你的组件实例中。这是最容易出错的地方之一，建议使用 TypeScript 并确保两边的接口定义同步。

2.2 属性与数据的双向绑定：不仅仅是v-model

在设计器中配置的组件属性，如何实时反映到组件视图上？这依赖于 VTJ 的响应式数据流管理。当你修改设计器面板上的某个输入框时，这个值的变化会通过平台内部的响应式系统，传递到你的组件实例的props中。因此，你的业务组件必须是一个纯粹的、受控的 Vue 组件，其渲染完全依赖于接收到的props。

对于需要内部状态的情况，比如一个可折叠的面板，其展开状态可能不需要持久化到页面配置中。这时，你可以在组件内部使用ref或reactive来管理本地状态。但需要区分清楚：哪些状态是组件的“配置”（应放在props里供设计器修改），哪些是组件的“运行时 UI 状态”（可放在内部）。一个简单的原则是：如果这个值需要在不同环境（设计态、预览态、运行态）保持一致，或者需要被页面其他部分引用，就应该作为prop暴露出去。

更复杂的场景是组件需要向外部“输出”数据。例如，一个数据筛选组件，当用户选择条件后，需要将筛选结果传递给父组件。这可以通过emits定义事件来实现。在设计器中，你可以将这些事件连接到页面的全局方法或其它组件的动作上，实现组件间的通信。

// 在业务组件内部 const emit = defineEmits<{ (e: 'filter-change', payload: FilterCondition): void; }>(); const handleInternalChange = (condition) => { // ...内部处理逻辑 emit('filter-change', condition); // 触发定义好的事件 };

2.3 样式隔离与全局污染规避

在低代码平台中，多个来自不同开发者的自定义组件可能会被集成到同一个页面。如果没有样式隔离机制，很容易发生 CSS 类名冲突或样式意外覆盖。VTJ Designer 通常采用 CSS-in-JS 或 Scoped CSS 的策略来管理组件样式。

对于 Vue SFC 单文件组件，使用<style scoped>是最简单有效的方式。Vue 编译器会自动为模板中的元素和样式添加唯一的数据属性，实现组件级别的隔离。

<template> <div class="my-chart"> <!-- 内容 --> </div> </template> <style scoped> /* 这里的样式只会作用于当前组件 */ .my-chart { border: 1px solid #eee; } </style>

如果你使用的是类似 UnoCSS 的原子化 CSS 框架，或者需要动态生成样式，则需要更加小心。避免直接修改全局样式或使用过于宽泛的选择器（如div { ... }）。一个最佳实践是，为你的自定义组件建立一个明确的前缀命名空间，无论是 CSS 类名还是内部状态变量。

实操心得：即使使用了scoped，深度选择器（如::v-deep或:deep()）也可能意外影响到子组件。在自定义组件中，如果确实需要覆盖子组件样式，建议通过props将样式类作为参数传递给子组件，而非直接穿透。这保持了样式的契约性，更利于维护。

3. 设计器面板：为你的组件打造专属“控制台”

如果说自定义组件是“身体”，那么设计器面板就是它的“大脑”和“遥控器”。一个设计良好的面板，能让非技术背景的运营或产品人员也能轻松配置出复杂的组件效果。VTJ Designer 的面板系统通常是可插拔的，允许你为自定义组件注册专属的属性编辑器。

3.1 面板的组成与注册机制

设计器右侧的属性面板通常由多个“编辑器”组成，每个编辑器负责编辑某一类或某一个属性。VTJ 会为基本类型（string,number,boolean）提供默认编辑器（输入框、数字框、开关）。但对于复杂类型，如一个颜色选择器、一个图标选择器、或一个动态数据源配置器，你就需要自定义编辑器。

自定义编辑器本身也是一个 Vue 组件。你需要通过平台的扩展 API 将其注册到对应的属性类型或组件上。

// 自定义一个颜色选择器编辑器 import ColorPickerEditor from './ColorPickerEditor.vue'; import { registerEditor } from '@vtj/designer'; registerEditor('color', ColorPickerEditor); // 在组件描述符中，指定某个属性使用这个编辑器 props: { themeColor: { type: 'color', // 使用自定义的 'color' 类型 label: '主题色', default: '#1890ff' } }

编辑器组件需要实现一个通用的接口：接收一个valueprop（当前值），并在值变化时触发一个change事件。平台会负责将这个编辑器嵌入到面板中，并管理值的双向同步。

<!-- ColorPickerEditor.vue --> <template> <div class="color-editor"> <input type="color" :value="modelValue" @input="handleChange" /> <span>{{ modelValue }}</span> </div> </template> <script setup> const props = defineProps(['modelValue']); const emit = defineEmits(['update:modelValue']); const handleChange = (e) => { emit('update:modelValue', e.target.value); }; </script>

3.2 复杂属性的结构化编辑：对象与数组

当组件的某个prop是对象或数组类型时，在面板上呈现为一个可折叠的结构化表单是最佳实践。VTJ 通常支持通过schema来描述复杂对象的内部结构。

props: { chartOptions: { type: 'object', label: '图表高级选项', default: () => ({}), schema: { grid: { type: 'object', label: '网格', properties: { show: { type: 'boolean', label: '显示网格', default: true }, color: { type: 'string', label: '网格颜色', default: '#ccc' } } }, tooltip: { type: 'object', label: '提示框', properties: { trigger: { type: 'string', label: '触发方式', default: 'item', editor: 'select', editorProps: { options: [ { label: '数据项', value: 'item' }, { label: '坐标轴', value: 'axis' } ] } } } } } } }

通过定义schema，平台可以自动生成一个嵌套的编辑界面，用户无需编写任何代码即可配置复杂的对象。对于数组类型，同样可以定义itemSchema来指定数组每一项的结构，面板会提供列表的增删改查操作界面。

3.3 面板与画布的实时联动

一个高级的设计器体验是“所见即所得”。这意味着当你在右侧面板修改属性时，左侧画布中的组件应该实时更新。VTJ 通过其内部的响应式状态管理实现了这一点。对于开发者而言，你需要确保你的组件是响应式的。

这里有一个常见的性能陷阱：如果组件的某个属性变化会触发一个昂贵的操作（比如重新请求大量数据、进行复杂的计算），直接实时更新可能会导致设计器卡顿。为了解决这个问题，可以在自定义编辑器或组件内部实现“防抖”或“节流”逻辑，或者区分“设计态”和“预览态”。例如，只在用户停止输入 500 毫秒后才触发更新，或者在属性编辑器的旁边提供一个“应用”按钮。

// 在自定义编辑器内部实现防抖 import { ref, watch } from 'vue'; import { debounce } from 'lodash-es'; const props = defineProps(['modelValue']); const emit = defineEmits(['update:modelValue']); const localValue = ref(props.modelValue); // 使用防抖后的函数提交变化 const debouncedEmit = debounce((val) => { emit('update:modelValue', val); }, 500); watch(localValue, (newVal) => { debouncedEmit(newVal); });

4. 实战：封装一个支持AI参数调优的数据图表组件

让我们通过一个综合案例，将上述概念串联起来。假设我们需要封装一个折线图组件，它不仅能配置常规的样式和数据，还能集成一个简单的 AI 参数建议功能（模拟 AI 根据数据特征推荐图表配置）。

4.1 组件设计与描述符定义

首先，我们明确组件的核心属性：

1. dataUrl: 数据源接口。
2. chartConfig: 图表核心配置（标题、颜色、坐标轴等）。
3. enableAIOptimization: 布尔值，是否开启 AI 参数优化。
4. aiSuggestion: 一个只读对象，展示 AI 给出的建议配置。

对应的组件描述符如下：

// MyAILineChart.vtj.js import { defineVTJComponent } from '@vtj/designer'; import MyAILineChartWidget from './MyAILineChartWidget.vue'; export default defineVTJComponent({ name: 'AI智能折线图', widget: MyAILineChartWidget, type: 'chart', icon: 'LineChart', // 假设平台支持图标组件 defaultSize: { width: 600, height: 400 }, props: { dataUrl: { type: 'string', label: '数据接口地址', default: '', editor: 'input', editorProps: { placeholder: '请输入JSON数据接口URL' } }, chartConfig: { type: 'object', label: '图表配置', default: () => ({ title: { text: '趋势图', show: true }, color: '#5470c6', xAxis: { type: 'category' }, yAxis: { type: 'value' } }), schema: { /* ... 详细的schema定义，用于生成嵌套表单 ... */ } }, enableAIOptimization: { type: 'boolean', label: '启用AI优化建议', default: false }, // 这是一个只读属性，由组件内部根据AI逻辑填充，设计器仅用于展示 aiSuggestion: { type: 'object', label: 'AI建议配置', default: () => ({}), readonly: true // 关键：标记为只读，面板不提供编辑，仅展示 } }, emits: { 'config-applied': { label: '应用AI建议' } } });

4.2 实现业务组件与AI逻辑集成

在 Vue 业务组件中，我们需要实现以下逻辑：

1. 根据dataUrl获取数据。
2. 根据chartConfig渲染 ECharts 图表。
3. 监听enableAIOptimization和data，当两者都满足时，调用一个模拟的 AI 服务来分析数据特征（例如，判断数据波动性、极值数量），并生成优化建议（如建议将折线改为平滑曲线、调整颜色对比度、添加平均值线等）。
4. 将 AI 建议结果赋值给aiSuggestion属性。由于该属性被标记为readonly，我们需要通过组件实例的暴露机制或事件来更新它。一种常见模式是使用defineExpose暴露一个方法供父级（设计器平台）调用。

<!-- MyAILineChartWidget.vue --> <template> <div ref="chartRef" style="width:100%;height:100%;"></div> <div v-if="Object.keys(aiSuggestion).length > 0" class="ai-suggestion-panel"> <h4>AI优化建议</h4> <pre>{{ JSON.stringify(aiSuggestion, null, 2) }}</pre> <button @click="applySuggestion">应用此建议</button> </div> </template> <script setup> import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'; import * as echarts from 'echarts'; const props = defineProps({ dataUrl: String, chartConfig: Object, enableAIOptimization: Boolean, // aiSuggestion 作为prop接收，用于展示 aiSuggestion: Object }); const emit = defineEmits(['config-applied']); const chartRef = ref(null); let chartInstance = null; // 模拟AI分析函数 const analyzeDataWithAI = (data) => { // 这里是模拟逻辑，真实场景可能调用后端API const suggestion = {}; if (data.series && data.series[0]?.data) { const values = data.series[0].data; const max = Math.max(...values); const min = Math.min(...values); if (max - min > 100) { suggestion.yAxis = { scale: true }; // 数据跨度大，建议开启坐标轴缩放 } if (values.length > 20) { suggestion.smooth = true; // 数据点过多，建议平滑曲线 } } return suggestion; }; // 获取数据、渲染图表、触发AI分析的主逻辑 const renderChart = async () => { if (!chartRef.value) return; // 1. 获取数据 let chartData = {}; if (props.dataUrl) { try { const response = await fetch(props.dataUrl); chartData = await response.json(); } catch (error) { console.error('Fetch data error:', error); } } // 2. 初始化或更新图表 if (!chartInstance) { chartInstance = echarts.init(chartRef.value); } const option = { ...props.chartConfig, dataset: { source: chartData }, // ... 其他ECharts配置 }; chartInstance.setOption(option); // 3. 如果开启AI优化，则进行分析 if (props.enableAIOptimization && chartData) { const suggestion = analyzeDataWithAI(chartData); // 关键：如何将 suggestion 同步到 aiSuggestion？ // 我们需要触发一个事件或调用一个外部方法。 emit('update:aiSuggestion', suggestion); // 假设平台支持 .sync 类似语法 // 或者通过 expose 的方法 if (window.__VTJ_UPDATE_PROP__) { // 这是一个假设的平台注入方法 window.__VTJ_UPDATE_PROP__('aiSuggestion', suggestion); } } }; // 暴露一个方法供设计器平台调用，用于手动触发AI分析 const runAIAnalysis = () => { renderChart(); }; defineExpose({ runAIAnalysis }); // 监听相关prop的变化 watch(() => [props.dataUrl, props.chartConfig], renderChart, { deep: true }); watch(() => props.enableAIOptimization, (newVal) => { if (newVal) { renderChart(); } }); onMounted(() => { nextTick(renderChart); }); onUnmounted(() => { chartInstance?.dispose(); }); </script>

4.3 实现自定义的AI建议展示面板

由于aiSuggestion是只读的复杂对象，默认的 JSON 展示不友好。我们可以为其注册一个自定义的面板编辑器，专门用于美观地展示 AI 建议，并提供一个“一键应用”按钮。

<!-- AISuggestionViewer.vue --> <template> <div class="ai-suggestion-viewer"> <h4 v-if="hasSuggestion">🎯 AI优化建议</h4> <div v-if="hasSuggestion" class="suggestion-list"> <div v-for="(item, key) in modelValue" :key="key" class="suggestion-item"> <span class="item-key">{{ key }}:</span> <span class="item-value">{{ formatValue(item) }}</span> </div> </div> <el-button v-if="hasSuggestion" type="primary" size="small" @click="applySuggestion" > 应用所有建议 </el-button> <p v-else class="empty-tip">暂无AI建议。请确保已启用AI优化并加载数据。</p> </div> </template> <script setup> import { computed } from 'vue'; const props = defineProps(['modelValue']); const emit = defineEmits(['apply']); const hasSuggestion = computed(() => { return props.modelValue && Object.keys(props.modelValue).length > 0; }); const formatValue = (val) => { if (typeof val === 'object') return JSON.stringify(val); return String(val); }; const applySuggestion = () => { emit('apply', props.modelValue); }; </script> <style scoped> .ai-suggestion-viewer { padding: 12px; border: 1px dashed #91d5ff; background-color: #f0f9ff; border-radius: 4px; } .suggestion-list { margin: 10px 0; } .suggestion-item { margin-bottom: 6px; font-size: 13px; } .item-key { font-weight: bold; margin-right: 8px; color: #1890ff; } .empty-tip { color: #999; font-size: 12px; } </style>

然后，在注册组件时，将这个查看器绑定到aiSuggestion属性上。这里需要平台支持为属性指定一个复杂的、只读的查看器组件，而非常规编辑器。

// 在主入口文件中注册自定义查看器 import { registerEditor } from '@vtj/designer'; import AISuggestionViewer from './editors/AISuggestionViewer.vue'; // 假设平台支持注册一种名为 'ai-suggestion-viewer' 的特殊编辑器类型 registerEditor('ai-suggestion-viewer', AISuggestionViewer); // 在组件描述符中应用 props: { aiSuggestion: { type: 'object', label: 'AI建议', default: () => ({}), readonly: true, editor: 'ai-suggestion-viewer' // 使用自定义查看器 } }

4.4 调试与发布：让组件在设计器中“活”起来

开发完成后，你需要在本地进行集成调试。VTJ Designer 通常提供一个开发模式，允许你加载本地的自定义组件包。

1. 创建组件包入口：创建一个index.js文件，统一导出所有自定义组件和编辑器。

   // index.js import MyAILineChart from './components/MyAILineChart.vtj.js'; import AISuggestionViewer from './editors/AISuggestionViewer.vue'; import { registerEditor } from '@vtj/designer'; export const components = { MyAILineChart }; export const editors = { 'ai-suggestion-viewer': AISuggestionViewer }; // 也可以选择自动注册 export function install(app) { Object.entries(components).forEach(([name, comp]) => { app.component(name, comp); }); Object.entries(editors).forEach(([type, editor]) => { registerEditor(type, editor); }); }

2. 在本地设计器中引用：在你的设计器项目（通常是一个独立的 Vue 应用）中，通过 npm link 或直接引用路径的方式，导入并安装这个组件包。

   // designer-project/src/main.js 或类似入口 import { createApp } from 'vue'; import VTJDesigner from '@vtj/designer'; import { install as installMyWidgets } from 'my-vtj-widgets'; // 你的组件包 const app = createApp(...); app.use(VTJDesigner); app.use(installMyWidgets); // 安装自定义组件和编辑器

3. 测试与验证：启动设计器，在组件库中应能找到“AI智能折线图”。将其拖入画布，检查右侧面板是否正确显示了dataUrl、chartConfig等可编辑属性，以及aiSuggestion的只读查看面板。配置数据源，勾选“启用AI优化”，观察 AI 建议面板是否出现内容，点击“应用建议”按钮，检查是否触发了对应事件并更新了图表配置。

4. 打包与发布：使用 Vite 或 Webpack 将你的组件包打包为 UMD 或 ESM 格式。然后，你可以将其发布到私有 npm 仓库，或直接提供打包后的文件给设计器项目使用。记得编写清晰的README.md，说明组件的功能、属性、事件以及如何安装使用。

5. 避坑指南与性能优化

在扩展 VTJ Designer 的过程中，我踩过不少坑，也总结了一些让组件更稳定、更高效的经验。

5.1 属性定义的边界与验证

坑点：属性定义过于宽松，导致运行时错误。例如，一个要求是数字数组的属性，用户却在设计器中输入了字符串，导致图表渲染崩溃。解决方案：在组件描述符的props定义中，充分利用validator或schema进行严格的类型和值验证。对于复杂对象，schema是天然的验证器。对于简单类型，可以自定义验证函数。

props: { dataPoints: { type: 'array', label: '数据点', default: () => [], validator: (value) => { return Array.isArray(value) && value.every(item => typeof item === 'number'); }, // 或者在 editorProps 中约束UI输入 editor: 'input-tags', // 一个输入标签的编辑器 editorProps: { type: 'number' // 编辑器只允许输入数字 } } }

5.2 组件实例的生命周期管理

坑点：在自定义组件中使用了定时器、事件监听器或第三方库实例（如 ECharts、Map），但在组件被设计器销毁（如从画布删除）时没有正确清理，导致内存泄漏。解决方案：严格遵守 Vue 3 的生命周期钩子。在onUnmounted中执行所有清理操作。

import { onUnmounted } from 'vue'; import * as echarts from 'echarts'; const chartInstance = ref(null); onMounted(() => { chartInstance.value = echarts.init(...); // 添加窗口resize监听 window.addEventListener('resize', handleResize); }); onUnmounted(() => { // 1. 销毁ECharts实例 chartInstance.value?.dispose(); chartInstance.value = null; // 2. 移除事件监听 window.removeEventListener('resize', handleResize); // 3. 清除任何可能的定时器 if (timerId) clearInterval(timerId); });

5.3 设计器态与运行态的区分

坑点：组件在设计器画布中（设计态）和最终用户看到的页面中（运行态）行为不一致。例如，一个需要真实后端接口的组件，在设计态下因为跨域或接口不存在而一直加载失败。解决方案：利用 VTJ 平台提供的运行时上下文信息。平台通常会向组件注入一个__designMode__或类似的属性。

// 在组件内部 import { inject } from 'vue'; const isDesignMode = inject('isDesignMode', false); const fetchData = async (url) => { if (isDesignMode) { // 设计态下，返回模拟数据，避免真实请求 return generateMockData(); } else { // 运行态下，发起真实请求 return await (await fetch(url)).json(); } };

5.4 大型数据集与性能优化

坑点：图表或表格组件一次性渲染上万条数据，导致设计器操作卡顿，拖拽、缩放不跟手。解决方案：

1. 虚拟滚动/分页：对于列表类组件，在设计态下强制启用虚拟滚动或只渲染前 N 条数据作为预览。
2. 数据采样：在设计态，如果检测到数据量过大，自动对数据进行降采样后再传递给渲染引擎。可以在组件描述符中增加一个previewSampleSize属性来控制。
3. 惰性渲染：监听画布的视口变化，只有当组件完全进入可视区域时才进行重度渲染。
4. 防抖更新：如前所述，对响应设计器属性变化的渲染逻辑进行防抖处理。

// 在组件内部实现数据采样 const getDisplayData = (rawData, sampleSize = 100) => { if (!isDesignMode.value || rawData.length <= sampleSize) { return rawData; } const step = Math.floor(rawData.length / sampleSize); return rawData.filter((_, index) => index % step === 0); };

5.5 样式冲突与作用域提升

坑点：即使使用了<style scoped>，组件内部的第三方 UI 库（如 Element Plus）的样式仍可能被全局样式覆盖，或者反过来覆盖了设计器本身的样式。解决方案：

1. 提升选择器优先级：在自定义组件的样式中，对于需要强保证的规则，可以适当提高特异性，例如使用双重类名.my-widget .el-button。
2. 使用 CSS Modules 或 CSS-in-JS：如果项目配置允许，使用更严格的样式隔离方案。
3. 约定前缀：为所有自定义组件约定一个统一的前缀，如vtj-widget-，并应用于根元素和关键内部元素。
4. 审查全局样式：确保设计器项目本身的全局样式不会使用过于宽泛的选择器影响到自定义组件内部。

扩展 VTJ Designer 的过程，是一个将灵活的业务代码融入严谨的平台框架的过程。它要求开发者不仅要有扎实的 Vue 3 功底，还要有平台思维，理解数据流、生命周期和样式隔离在低代码环境下的特殊之处。当你成功封装出第一个被团队广泛使用的自定义组件时，你会发现，这种“创造工具的工具”所带来的成就感和效率提升，远比重复编写业务页面要大得多。