Detailed explanation of the communication method example between parent and child components in vuejs

// 

<template>
 <div class="parent">
  <v-child :msg="message"></v-child>
 </div>
</template>
<script>
 import VChild from './'
 export default {
  components: {
   VChild
  },
  data () {
   return {
    // The parent component passes message as a parameter into the child component    message: 'Message from parent component'
   }
  }
 }
</script>

// 
<template>
 <div class="child">
  <h1>child</h1>
  <p>{{ msg }}</p>
 </div>
</template>
<script>
 export default {
  // Define parameters that can be passed into by external systems through props  // Define an msg variable, type String, default is an empty string  props: {
   msg: {
    type: String,
    default: ""
   }
  }
 }
</script>

// router/

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Parent from '@/test/Parent'
(Router)
export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  },
  {
   path: '/parent',
   component: Parent
  }
 ]
})

// 

<template>
 <div class="parent">
  <v-child :msg="message" @childNotify="childNotify"></v-child>
 </div>
</template>
<script>
 import VChild from './'
 export default {
  components: {
   VChild
  },
  data () {
   return {
    // The parent component passes message as a parameter into the child component    message: 'Message from parent component'
   }
  },
  methods: {
   childNotify (params) {
    (params)
   }
  }
 }
</script>

// 

<template>
 <div class="child" @click="notifyParent">
  <h1>child</h1>
  <p>{{ msg }}</p>
 </div>
</template>
<script>
 export default {
  // Define parameters that can be passed into by external systems through props  // Define an msg variable, type String, default is an empty string  props: {
   msg: {
    type: String,
    default: ""
   }
  },
  methods: {
   notifyParent () {
    var params = {
     m: 1,
     n: 2
    }
    // The child component notifies the parent component in the form of an event (need to use the $emit method, the first parameter, the event name; the parameters attached to the second event)    this.$emit('childNotify', params)
   }
  }
 }
</script>