Directus子组件修改输入值后保存失效，如何触发父组件onchange事件？

我之前开发Directus自定义组件时也碰到过一模一样的问题！直接修改this.values里的属性确实能让父组件显示更新，但Directus内部的变更检测机制没被触发——这就是手动输入正常、代码修改却保存失效的核心原因。

当然可以调用父组件的onChange事件，而且这正是解决这个问题的正确姿势，具体操作如下：

1. 直接在子组件中调用onChange方法 #

Directus的自定义组件会默认接收onChange作为props，它的作用就是专门通知Directus数据发生了变更。你不需要直接修改this.values，而是通过onChange传递更新后的完整值对象：

// 错误方式：直接修改属性，不会触发变更检测
// this.values.input_name = 'some value';

// 正确方式：调用onChange传递更新后的完整数据
this.onChange({
  ...this.values, // 保留其他原有属性
  input_name: 'some value' // 更新目标属性
});

这么做之后，不仅父组件输入框会显示新值，Directus也会标记该字段为已修改，保存时就能正常提交新值了。

2. 多层嵌套子组件的处理 #

如果你的子组件是嵌套在自定义组件内部的多层结构，只需要把onChange方法通过props逐层传递下去即可：

<!-- 父自定义组件的模板 -->
<child-component 
  :current-values="values"
  :on-change="onChange"
></child-component>

然后在子组件的脚本中，调用传递过来的onChange方法更新数据，逻辑和上面一致。

额外提醒 #

Directus的values虽然是响应式对象，但直接修改其属性并不会触发系统内部的变更跟踪逻辑——只有通过官方提供的onChange方法，才能让Directus正确识别到数据修改，进而在保存时同步到数据库。

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