Hello, classmates, we have learned the parent-to-child and child-to-parent in component communication .
What we are going to learn today is the parallel value transfer in component communication .
What does parallel value passing mean?
For example, the relationship between you and your elder brother, younger brother, sister, and younger sister is the relationship of the same generation.
When we used components before, through use and being used , there would be a parent-child relationship .
This relationship does not exist for parallel components.
<div id="app">
<App></App>
</div>
<script>
const bus = new Vue();
Vue.component('A',{
data(){
return{
}
},
template:`
<button @click='handleClick'>加入购物车</button>
`,
methods:{
handleClick(){
bus.$emit('add',1);
}
}
});
Vue.component('B',{
data(){
return{
count:0
}
},
template:`
<div>
{
{count}}
</div>
`,
methods:{
},
created () {
bus.$on('add',(n) => {
this.count += n;
})
}
})
const App = {
data () {
return {
}
},
template:`
<div>
<A></A>
<B></B>
</div>
`,
methods: {
}
}
new Vue({
el:'#app',
components: {
App
}
});
</script>
We wrote a global component A and a global component B as usual .
In the global component A, there is a button, accompanied by a click event, used to transfer data .
Global component B, show only a div variable count, count is receiving a pass over the value of A component .
The principle of parallel component transfer is to find a common intermediate quantity.
Just like when we wrote the two variables A and B to exchange values, we usually find a common empty variable C. Give the value of A to C, then give the value of B to A, and finally give the value of C to B.
Parallel components transfer values are the same as this idea. There is no way to directly transfer values between parallel components. A common intermediate value must be found , just like a bus.
The const bus = new Vue(); we wrote at the top of the example
In component A, after the user clicks the button, the value is passed through bus.$emit() . The first parameter is a name defined by ourselves, and the second parameter is the value to be passed .
B components, we call created the life-cycle function , the life cycle of this thing then we will open a repeat of this stuff, we just need to know where created is called when the instance is newly created, not any of Mount. In created, we call **bus.＄on()** to receive the value. The first parameter is still the name we defined in component A before, and the second parameter is a function that receives the value passed by other components .
In fact, it's still very simple. We use the intermediate amount of bus to play a transfer role .
Then a $emit, a $on, transmit and receive .
In fact, here we have completed the transfer of value between the parallel components , then we have to facilitate the display, write a local assembly App , use the A, B two global components . Then in the Vue instance we created, we can directly mount the partial App component .
After clicking to add to the shopping cart, the displayed count value was as expected, and the +1 operation was completed.
So far we have learned the parent-to-child, child-to-parent and parallel value-passing in component communication . These are very commonly used communication methods. In the next issue, we will also explain some other component communication methods . Although they are not commonly used, it is hard to say where they can be used, such as during interviews , so it is better to understand more.
There is a WeChat mini program course design, complete design needs, contact personal QQ: 505417246
Pay attention to the following WeChat public account, you can receive WeChat applet, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python and other practical learning materials. The
latest and most complete front-end knowledge summary and project source code will be released to the WeChat public as soon as possible No., please pay attention, thank you!
