The examples on the official website are so obscure. I saw one of the first two big ones. Regarding the communication issues between non-father and son, I got the following example after checking them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Communication issues between brothers</title>
<script src=""></script>
</head>
<body>
<div >
<one></one>
<two></two>
</div>
<script>
//Create a central event bus. var bus =new Vue();
// Component one ('one',{
template:'<button v-on:click="oneFn">Click+</button>',
data:function () {
return{
oneNum:0
}
},
// Create a method for component one to trigger event common (common is the custom event name of the central event bus bus, it only needs to be consistent with the listening event name in two. methods:{
oneFn:function () {
bus.$emit("common", +=1)//The parameters here are the parameters (n) passed in the listening event in two. This (triggered) refers to the component one, and this (listen) refers to the bus. }
}
});
// Component two ('two',{
template:'<p>{{twoNum}}</p>',
data:function () {
return {
twoNum:0
}
},
// Create a hook for component two, mount $on listening event, created:function () {
var self = this;// Assign this to self. bus.$on('common',function (n) {
= n;//This is self, which means that it is a variable of component two. If this is this, it means that it is a variable of bus. })
}
});
new Vue({
el:'#app'
})
</script>
</body>
</html>
I am also a novice. I just started to learn Vue by myself. If you don’t understand children’s shoes, please leave a message to make progress together!
The above is a simple example code for non-father-son communication issues in vue introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!