Vue sibling components how to exchange event methods, without vuex, read a lot on the Internet, is an example, do not quite understand?

clipboard.png
graphic CAPTCHA and SMS CAPTCHA are both a component. Click to get the SMS CAPTCHA and then call the method in the graphic CAPTCHA component to refresh the image

.
Vue.js javascript
May.22,2022

component description:
parent component: a graphic verification code B SMS verification code C

idea:
use parent component A to operate events (ref) of B, and the event flow is as follows: C-> A-> B

approximate code:

component A 

<template>
    <B ref="children"/>
    <C :triggerChildMehtod="triggerChildMehtod"/>
</template>
<script>
export default {
  methods: {
     triggerChildMehtod(){
        // 
        this.$refs.children.refresh();
     }
  }
}
</script>

component B 

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

component C 

<template>
    <div>somecode...</div>
</template>
<script>
export default {
  props: ['triggerChildMehtod'],
  methods: {
     refresh(){
        // 
        this.triggerChildMehtod()
     }
  }
}
</script>

Click to get the SMS verification code and send $emit to the parent component. The parent component's method updates the change value (iPP is also fine). This change is transmitted to the graphic CAPTCHA component (props). If you hear a change in the received value in the graphical CAPTCHA component, you can perform the image refresh method

by adding an observable object to the SMS CAPTCHA component. Subscribe to the graphic CAPTCHA component, click to get the SMS CAPTCHA, then push the update, and then the graphic CAPTCHA component receives the push refresh image.

you can also use vue's message mechanism. Create a new vue object to manage messages.
Click to get the CAPTCHA, then the item graphic CAPTCHA component sends a refresh message, and the graphical CAPTCHA component receives the message and refreshes it. 

// msg
var msg = new Vue();
// 
msg.$emit('pic_verify',{refresh:true});

// pic_verify
msg.on('pic_verify',(data)+>{
    if(data.refresh) {
        // 
        ...
    }
});

Previous: Ask the boss, a javascript programming problem.

Next: [typeScript] js type derivation error

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e44321-44aa2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e44321-44aa2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?