vue2 子组件调用父组件数据并展示，父组件修改了值，子组件怎么没有同步更新？子组件拿到父组件数据使用了get和set，怎么才能触发依赖追踪

当父组件的数据发生变化时，子组件并不会自动更新，这是因为Vue的响应式系统是基于依赖追踪的。当组件渲染时，Vue会追踪组件所依赖的所有数据，并建立一个依赖关系图。当数据发生变化时，Vue会遍历依赖关系图，重新渲染所有依赖的组件。

如果子组件拿到了父组件的数据并使用了get和set，但是没有触发依赖追踪，可能是因为子组件没有正确地使用该数据。在子组件中使用父组件的数据时，应该使用计算属性或者watch来监听该数据的变化，这样才能正确地触发依赖追踪。

另外，如果父组件的数据是异步获取的，可能会出现子组件渲染时数据还未获取到的情况。此时可以使用v-if指令来控制子组件的渲染时机，等到数据获取成功后再渲染子组件。

相关问题

vue2 子组件调用父组件数据并展示，父组件修改了值，子组件怎么没有同步更新？子组件拿到父组件数据使用了get和set

子组件调用父组件数据并展示后，如果父组件修改了该数据，子组件不会同步更新。这是因为Vue的响应式系统是基于依赖追踪的，只有在模板中使用的数据才会被追踪，而子组件中使用的父组件数据并没有在模板中使用，所以不会被追踪。如果想要子组件同步更新父组件数据，可以使用v-model指令或者$emit方法来实现。具体来说，可以在子组件中使用v-model绑定父组件数据，并在子组件中触发input事件来更新父组件数据；或者在子组件中使用$emit方法触发自定义事件，并在父组件中监听该事件来更新数据。如果你使用了get和set方法来获取和设置父组件数据，那么子组件仍然无法同步更新父组件数据，因为这并不会触发依赖追踪。

代码解释 addDepart(type, id) { if (type === 'add') { // 打开添加子部门弹层 this.showDialog = true this.currentId = id } else if (type === 'edit') { // 打开编辑部门弹层 this.showDialog = true // 调用子组件的获取部门详情的方法 this.currentId = id // 拿到的是组件实例 this.$refs.addDept // 更新props- 异步动作 // 直接调用了子组件的方法 是同步的方法 // 要在子组件获取数据 // 父组件调用子组件的方法来获取数据 this.$nextTick(() => { this.$refs.addDept.getDepartmentDetail() }) // setTimeout(() => { // this.$refs.addDept.getDepartmentDetail() // }, 2000) } else { // 执行删除操作 this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'error' }) .then(async () => { await delDepartmentApi(id) // 重新获取部门数据 this.getDepartmentList() this.$message({ type: 'success', message: '删除成功!' }) }) .catch(() => { this.$message({ type: 'info', message: '已取消删除' }) }) } },

这是一个Vue组件中的一个方法，其作用是根据传入的参数type和id，执行不同的操作。如果type为'add'，则会打开一个添加子部门的弹层；如果type为'edit'，则会打开一个编辑部门的弹层，并调用子组件的方法来获取部门详情的数据；如果type不为'add'或'edit'，则会执行删除操作，弹出一个确认框，用户点击“确定”后会调用异步方法删除部门，并重新获取部门数据，弹出删除成功的提示信息。