Vue2 中组件间传值的方法有以下几种:
- props:父组件通过 props 属性向子组件传递数据。子组件接收该数据后,即可在其模板中直接使用。
- $emit() 和事件:子组件通过 $emit()
方法触发一个自定义事件,并把需要传递的数据作为参数传入。父组件监听该自定义事件,并在回调中处理数据。通过事件可以实现任意级别的组件间通信。 - $parent 和 $children:父组件可以通过 $children 找到所有的子组件,子组件可以通过 $parent
找到其父组件。这种方式属于直接引用和修改组件对象,需要注意和谨慎使用。 - provide 和 inject:祖先组件通过 provide 属性向子孙组件传递数据,子孙组件通过 inject
属性来获取这些数据。provide 和 inject 绑定并非响应式的,但是可以将一个观察者实例注入到 provide 中,使得组件在
inject 期间发生变化时获得通知。 - Vuex 状态管理:Vuex 是一个专门为 Vue.js
应用程序开发的状态管理库,提供了一种集中式存储管理应用程序中的所有组件的状态。组件通过调用 mutation
方法来改变状态,其他组件通过监听 state 属性来获取最新的状态。 - 兄弟组件间的传值:Vue2中使用eventBus中央事件总线 , Vue3中使用的 mitt库
这些组件间传值的方法各有优缺点,可以根据实际场景来选择使用。需要注意的是,不同的方式可能涉及到数据的响应性、可维护性和复杂度等问题,开发者应该根据实际情况进行权衡和取舍。