【Vue】vue兄弟组件之间怎么互调事件方法，不用vuex，网上看了很多，都是一个例子，不是很理解？

【Vue】vue兄弟组件之间怎么互调事件方法，不用vuex，网上看了很多，都是一个例子，不是很理解？
图形验证码和短信验证码都是一个组件，现在是点击获取短信验证码 后 调用图形验证码组件中的方法让图片刷新刷新

回答

组件说明：
父组件： A 图形验证码 B 短信验证码 C

思路：
利用父组件A操作B的事件（ref）， 事件流如下： C -> A -> B

大概代码：

组件A

<template>
    <B ref="children"/>
    <C :triggerChildMehtod="triggerChildMehtod"/>
</template>
<script>
export default {
  methods: {
     triggerChildMehtod(){
        // 触发子组件的方法
        this.$refs.children.refresh();
     }
  }
}
</script>

组件B

<template>
    <div>somecode...</div>
</template>
<script>
export default {
  methods: {
     refresh(){
        // somecode
     }
  }
}
</script>

组件C

<template>
    <div>somecode...</div>
</template>
<script>
export default {
  props: ['triggerChildMehtod'],
  methods: {
     refresh(){
        // 调用父组件方法
        this.triggerChildMehtod()
     }
  }
}
</script>

点击获取短信验证码 后 $emit 到父组件一个方法，父组件的方法做变更值的更新（i++也行），这个变更传到 图形验证码组件 里（props），图形验证码组件 里监听到接收的值有变化则并执行图片刷新方法

可以通过rxjs来实现，在短信验证码组件里面添加一个可观察对象，在图形验证码组件里面订阅，点击获取短信验证码后推送更新，然后图形验证码组件收到推送刷新图片。

你用vue的消息机制也可以吧。新建一个vue对象，用于管理消息。
点击获取验证码，然后项图形验证码组件发送刷新的消息，图形验证码组件接收到消息之后刷新。

// msg要设置成全局对象
var msg = new Vue();
// 向图形验证码组件发送消息，提示刷新
msg.$emit('pic_verify',{refresh:true});
// pic_verify组件
msg.on('pic_verify',(data)+>{
    if(data.refresh) {
        // 调用刷新事件
        ...
    }
});

以上是 【Vue】vue兄弟组件之间怎么互调事件方法，不用vuex，网上看了很多，都是一个例子，不是很理解？ 的全部内容， 来源链接： utcz.com/a/74542.html

回到顶部