在Vue中,组件之间的传值主要有以下几种方式:
1、父向子传递数据
在父组件中,通过自定义属性绑定要传递的数据。
在子组件中,通过props来接收这些数据。
// 父组件
// 子组件
2、子向父传递数据
子组件通过this.$emit触发事件,并传递参数。
父组件通过监听这个事件来获取子组件传递的数据。
// 子组件
// 父组件
<child-component @send="receiveMessage">
3、兄弟组件之间传递数据
兄弟组件间的通信通常通过父组件作为中介。
一个兄弟组件通过父组件传递数据给另一个兄弟组件。
// 父组件
<child-component-1 @send="handleSend">
4、跨级组件传递数据
跨级组件之间的通信同样可以借助中间层级的组件来实现。
顶层组件接收来自下层组件的数据并通过props将其传递给另一层级的组件。
// 父组件
<child-component-1 @send="handleSend">
5、使用全局事件总线
定义一个全局的Vue实例 $bus 作为事件中心。
发送方通过 $bus.$emit 触发事件,接收方通过 $bus.$on 监听事件。
// 发送方组件
// 接收方组件
以上就是Vue中常见的组件传值方式。选择哪种方式取决于具体的应用场景以及组件之间的关系。1
标签:通讯,bus,通过,传递数据,Vue,事件,组件 From: https://www.cnblogs.com/chen0509/p/18421852