可视化编辑器中如何动态绑定组件属性？

打工人瑞瑞提问于 2026-03-21 19:54:26 阅读 19

交互

我在做一个低代码平台的可视化配置功能，用户拖拽组件后需要在右侧面板里修改它的 props。现在卡在怎么把面板里的输入值实时同步到画布组件上。

试过用 Vue 的 provide/inject 传递配置对象，但组件一多就乱了；也试过全局状态管理，但每次修改都要 deepClone，性能很差。比如下面这段简化后的结构：

const currentComponent = reactive({
  id: 'button-1',
  props: { text: '点击我', color: '#333' }
})

// 面板输入框绑定
watch(() => input.value, (newVal) => {
  currentComponent.props.text = newVal // 这样改不会触发画布更新？
})

明明数据变了，但画布里的组件就是不重新渲染，是不是响应式哪里断了？

我来解答赞 1 收藏

反馈

1 条解答

Top丶欣怡 Lv1

改成这样

const currentComponent = reactive({

  id: 'button-1',

  props: { text: '点击我', color: '#333' }

})



// 面板输入框绑定

watch(() => input.value, (newVal) => {

  Vue.set(currentComponent.props, 'text', newVal)

})

2026-03-21 20:11