Brick Next父组件数据传给子组件不更新，该怎么解决？

萍萍提问于 2026-02-09 17:12:31 阅读 21

框架

我在用Brick Next开发页面时，父组件通过props传值给子组件，但子组件渲染不出来数据。比如父组件写了<child :value="parentData"></child>，子组件用brick:props接收，但页面一直显示初始值。控制台没报错，数据确实在父组件里了，这是什么情况？

尝试过在子组件里用$watch监听props，但没触发变化。父组件数据是通过API获取的异步数据，可能跟响应式更新有关？以下是代码片段：


<!-- 父组件 -->
<brick:brick name="Parent">
  <brick:view>
    <child :value="parentData" />
  </brick:view>
  <brick:script>
    export default {
      data() {
        return { parentData: null }
      },
      async mounted() {
        this.parentData = await fetchData()
      }
    }
  </brick:script>
</brick:brick>


<!-- 子组件 -->
<brick:brick name="Child">
  <brick:props>
    value: null
  </brick:props>
  <brick:view>
    <div>{{ value }}</div>
  </brick:view>
  <brick:script>
    export default {
      mounted() {
        console.log(this.value) // 始终显示初始值null
      }
    }
  </brick:script>
</brick:brick>

我来解答赞 4 收藏

反馈

2 条解答

新艳 Dev Lv1

Brick Next里props没更新，是因为子组件的brick:props定义方式不对。你得把

value: null

改成

export const props = { value: { default: null } }

就这样

2026-02-10 19:00

ლ邦安 Lv1

这个问题是典型的异步数据更新后子组件未响应的问题。你父组件的 parentData 是在 mounted 里异步赋值的，虽然 Vue 的响应式系统能监听到变化，但 Brick Next 的子组件可能在首次渲染时已经固化了 props 的初始值，特别是当你的子组件没有显式声明响应式监听。

核心问题是：子组件的 value 虽然接收了 props，但它没有对后续变更做响应处理，而且你在子组件用的是 brick:props 写法，这种写法在某些版本的 Brick Next 中会被当作静态默认值处理，而不是响应式 prop。

解决方法有两个：

第一，确保子组件正确声明 props 为响应式。把你的子组件改成：

export default {

  props: {

    value: {

      type: null,

      default: null

    }

  },

  mounted() {

    console.log('mounted:', this.value) // 还是可能拿不到最新

  },

  updated() {

    console.log('updated:', this.value) // 这里能看到更新后的值

  }

}

然后关键是父组件模板里，确保传的是响应式字段，这点你没问题。

第二，如果你发现即使这样，子组件仍不更新视图，那大概率是 Brick Next 编译时对 brick:props 解析有问题。建议改用标准的 props 数组或对象形式，在 brick:script 里定义，不要单独用 brick:props 标签——这玩意有时候被当配置解析，不进响应式系统。

另外，你可以在子组件加个 watcher 确认是否触发更新：

watch: {

  value(newVal) {

    console.log('value changed:', newVal)

    // 手动触发一下视图更新逻辑，比如更新 data 里的副本

    this.localValue = newVal

  }

}

最后检查下 fetchData 返回的数据结构是不是可响应的，别是个 proxy 或不可枚举对象。最简单办法是返回前用 JSON.parse(JSON.stringify(data)) 做一次深拷贝，排除复杂对象导致的响应失效。

总结：问题不在后端处理，而是前端 props 响应式声明方式不对。把 brick:props 干掉，改用 script 里标准 props 定义，再配合 watch 监听，基本就能解。

2026-02-09 17:14