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

clipboard.png
图形验证码和短信验证码都是一个组件,现在是点击获取短信验证码 后 调用图形验证码组件中的方法让图片刷新刷新

回答:

组件说明:
父组件: 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) {
        // 调用刷新事件
        ...
    }
});

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注