Data delivery method in vue component

Vue's component scope is all orphaned, and the parent component's data is not allowed to be directly referenced within the child component's template. A specific method must be used to achieve data transfer between components. There are three situations for passing data between components:

The parent component passes data to the child component and passes data through props.

The child component passes data to the parent component and passes data through events.

Pass data between two sibling components and pass data through event bus.

1. Parent component passes data to child component

Subcomponents section:

<template>
  <div class="child">
    {{ msg }}
  </div>
</template>
<script>
export default {
 name: 'child',
 data(){
  return {
  
  }
 },
 props: ['msg']
</script>

In, msg implements the variable defined in data, using props: ['msg'] to get the value of msg from the parent component

Parent component part:

<template>
  <div class="child">
    child
    <child :msg="message"></child>
  </div>
</template>
<script>
import child from './'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   message: 'hello vue'
  }
 }
}
</script>

When calling the component, use v-bind to bind the value of msg into the variable message defined in the name, so that the value of the message in it can be passed to.

Single data flow

When the parent component's message changes, the child component will also automatically update the view. But in the child components, we should not modify the prop. If you have to modify this data, you can use the following methods:

Method 1: Assign prop to a local variable, and then modify the local variable if it needs to be modified without affecting prop

export default {
  data(){
    return {
      newMessage: null
    } 
  },
  props: ['message'],
  created(){
     = ;
  }
}

Method 2: Process prop in the computed properties

export default {
  props: ['message'],
  computed: {
    newMessage(){
      return  + ' Hahaha';
    }
  }
}

2. Subcomponents pass data to parent components

The child component mainly passes data to the parent component through practice.

Subcomponents section:

<template>
  <div class="child">
   <span>username：</span>
   <input v-model="username" @change="sendUser" />
  </div>
</template>

In the html of the child component, when the value in the input changes, the username is passed to.

First, a sendUser method is declared, and the sendUser is called using the change event.

<script>
 export default {
  name: 'parend',
  data () {
   return {
     username: ''
   }
  },
  methods: {
   sendUser () {
    this.$emit('changeName', )
   }
  }
}
</script>

In sendUser, use $emit to iterate over the changeName event and return where changeName is a custom event, which is similar to a relay, passing it to the parent component through this event.

Parent component part:

<template>
  <div class="parent">
    <child @changeName="getUser"></child>
    <p>username：{{user}}</p>
  </div>
</template>

A getUser method is declared in the parent component, and the getUser method is called with the changeName event to get the parameter username passed from the child component

<script>
import child from './'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   user: ''
  }
 },
 methods: {
  getUser(data) {
    = data
  }
 }
}
</script>

The parameter msg in the getUser method is the parameter uesrname passed from the child component.

3. Data transfer between components at the same level

Sometimes two components also need communication (non-parent-son relationship). Of course Vue2.0 provides Vuex, but in simple scenarios, an empty Vue instance can be used as the central event bus.

<template>
  <div >
    <c1></c1>  //Component 1    <c2></c2> //Component 2  </div>
</template>

In component c1:

<template>
  <div class="c1">
    page
    <button @click="changeMsg">click</button>
  </div>
</template>
<script>
var Bus = new Vue(); //In order to facilitate the definition of Bus (empty vue) in a component, a new one will be created in actual use in actual useexport default {
 name: 'c1',
 data () {
  return {
   message: 'hi'
  }
 },
 methods: {
  changeMsg () {  //Click the button and will be passed to c2   bus.$emit('sendMsg', )
  }
 }
}
</script>

In component c2:

<template>
  <div class="c2">
    {{msg}}
  </div>
</template>

<script>
var Bus = new Vue();

export default {
 name: 'c2',
 data () {
  return {
   msg: ''
  }
 },
 created () {
  bus.$on('sendMsg',(data)=>{  //data is the message in the c1 component    = data
  })
 }
}
</script>

In actual use, buses are usually extracted:

//
import Vue from 'vue'
const Bus = new Vue()
expore default Bus

Reference when component calls (import Bus from './')

However, this introduction method may cause local scope of Bus after webpack packaging, that is, referring to two different Buses, resulting in the inability to communicate normally
Practical application:

Inject Bus into Vue root object

import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
  el:'#app',
 data:{
Bus
  }
})

Pass in subcomponentthis.$.$on(),this.$.$emit()Come to call

Summarize

The above is the data transmission method in the vue component introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!