Vue two same-level components to achieve value transfer

Vue components are connected, so it is inevitable that components need to pass values to each other. Parent uses v-bind to bind custom attributes to child components and uses props to receive them.

The child uses @custom event = 'function' this.$emit('custom event', 'content to be sent') to the parent. The child component triggers the parent component's function through $emit to achieve this. However, two components of the same level pass values to each other in this way.

<div id='app'>
 <children1></children1>
 <children2></children2>
</div>
<script>
  var children1 = {};
  var children2 = {};
 var vm = new Vue({
  el:'#app',
  components:{
   children1,
   children2
  }
 })
</script>

Now we need to pass the data in the children1 component to the children2 component

Mainly use $on() and $emit() in the vue instance

 <div id='app'>
  <children1></children1>
  <children2></children2>
 </div>
 <script>
     var Event = new Vue({}); // Create a vue instance to be used as a medium for value transfer var children1 = {
   template:`
    <div>
     <button @click='send'>Click me to send data to children2 component</button>
    </div>
   `,
   data(){
    return {
     msg:'I want to send data to children2'
    }
   },
   methods:{
    send(){ 
     Event.$emit('go',this.msg) 
    }
   }
  };
   var children2 = {
   template:`
    <div>
     <h2>Value received from children1 component: {{msg1}}</h2>  
    </div>
   `,
   data(){
    return {
     msg1:''
    }
   },
   created(){
    Event.$on('go',(v) => { // Must use arrow function because this
     this.msg1 = v;
    })
   }
  };
  var vm = new Vue({
   el:'#app',
   components:{
    children1,
    children2
   }
  })
</script>

The chilren1 component uses Event.$emit() to send data
The chilren2 component uses Eevent.$on() to receive data

This concludes this article on the implementation of value transfer between two Vue peer components. For more relevant Vue peer component value transfer content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: