Vue组件间值传递：$router.push实现详解

本文主要探讨了Vue应用中两组件间值传递的一种特定场景，即通过`$router.push`方法在父子组件和非父子组件之间实现数据的传递。在非父子组件通信中，常见的方法包括使用Vuex或自定义的bus（总线）模式，但文章重点集中在利用路由跳转的方式传递数据。 在实际需求中，开发者需要创建一个树状列表，其中每个列表项都有一个编辑按钮。点击编辑按钮后，会跳转到`ListEdit`路由，并携带当前选中的节点数据。树状列表组件通过`<tree>`标签展示，其模板中包含一个点击事件处理器`edit`，该方法接收一个`Idata`类型的参数`info`，包含了被选中节点的`label`和`scene`属性。 编辑方法中，开发者使用了Vue的内置`$router.push`方法，该方法用于导航到新的路由。具体调用方式如下： ```javascript edit(info: Idata) { this.$router.push({ name: 'ListEdit', // 跳转到的路由名称 query: { // 使用query参数传递数据 label: info.label, // 传递节点的label属性 scene: info.scene, // 传递节点的scene属性 }, }); } ``` 这里，`name`属性用于指定路由名称，`query`属性则是一个可选的查询字符串，用于在URL中附加键值对，从而在目标路由接收到这些参数。通过这种方式，即使数据不存储在Vuex中，也可以在两个组件间进行数据共享。 需要注意的是，由于作者提到使用的是公司封装的UI框架，且以TS编写，实际的代码可能包含了一些特定的库或API，这些细节可能会影响到具体的实现方式，但文章的核心思想在于路由参数的使用。如果是在纯Vue项目中，或者使用了其他数据管理方案（如Vue Router的`params`属性），实现原理大体相同，只是数据传递的渠道有所区别。 总结来说，这篇文章提供了在Vue应用中，利用`$router.push`实现树状列表编辑功能时，如何通过路由参数将数据传递给子组件的实例方法。这是一项实用的技巧，适用于处理跨组件间的值传递问题。