vue 调用兄弟组件方法怎么做

Posted 2023-04-03

vue组件的数据传递应该是单向，永远是向下的，把父组件属性方法传递到子组件。
如果子组件要改变不同的颜色，是应该接受父组件传递进来的props，自己调用自己的方法，把props当个参数来判断来显示什么颜色，而不是让父元素调子组件的方法。
还有一种是vuex，组件本身跟store的某个值绑定，外部组件修改store的值，来影响该组件的颜色。 参考技术A 引入vue-resource之后需要写
Vue.use(VueResource)

vue兄弟组件之间方法调用

参考技术A 方法一：

父组件 index.vue   中含有两个兄弟组件 business.vue  及  detail.vue

当 business.vue中主协办分配选择完成后 需要刷新   detail.vue中的数据

在父组件中 的 business.vue组件上 定义触发的方法  <business @updateDate='updateDate'></business>

在父组件中 的  detail.vue组件上 定义触发的方法  < detail.vue ref='detail'></detail>

在兄弟组件中 主协办分配选择完成后showUserAssignData方法去触发父组件 index.vue的updateDate方法

在父组件中 updateDate方法去触发detail.vue组件中刷洗数据的方法

 方法二：采用公共bus方法---js方法

第二个子组件需要调用第二个子组件方法

在main.js中 注册一个公共实例并绑定到原型上

 Vue.prototype.$bus = new Vue()

在第一个子组件中注册一个方法 在created 或者mounted中注册

在兄弟组件中触发该方法