网站首页 站长百科 正文

VUE兄弟组件传值操作实例分析

2022-01-13站长百科214290

这篇文章主要介绍了VUE兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下

本文实例讲述了VUE兄弟组件传值操作。分享给大家供大家参考，具体如下：

1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据

2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。

3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。

4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

我们可以创建一个单独的js文件eventVue.js,内容如下

 import Vue from 'vue'; export default new Vue();

假如父组件如下：

子组件a如下：

子组件b如下：

   {{btext}}

希望本文所述对大家vue.js程序设计有所帮助。

以上就是VUE兄弟组件传值操作实例分析的详细内容，更多请关注本站其它相关文章！

本文地址：https://www.ufcn.cn/article/524554.html

如非特殊说明，本站内容均来自于网友自主分享，概不代表本站观点，如有任何问题我们都将在收到反馈后的第一时间进行处理！