When the child communicates with the parent component, you need to use a custom event. Use v-on:xxx or @: xxx. In addition to listening for DOM events,
It can also be used for custom events between components

The child uses $emit() to trigger the event the parent uses $on() to listen for the child's event
--------------------------------------
In addition to using v-on | @ to add custom events on components, you can also listen to DOM events. In this case, you need to use the. Navive modifier 
Indicates listening to a native event, listening to the root element of the component
 The code is as follows:

<three :outdata="a" @click.native="changeA"/>

Parent component template

<template>
  <div id="app">
    {{ a }}
    <!-- Use components  @changeNew Is the name of the subcomponent definition changeA Is the method name defined by the parent component,
    //Because the parent wants to receive the value from the child component, only the method can accept -- >

    <three :outdata="a" @changeNew="changeA"/>

  </div>
</template>
<script>


import three from './components/three'

export default {
  components:{
    three
  },
  data(){
    return {
      a:"I am the value of the parent component"
    }
  },
  methods:{
     //The event parameter is the value from the receiving sub component. You can print it yourself
    changeA(event){
      this.a = event
    }
  }
}
</script>

Subcomponent template
-------

<template>
    <div class="three">

        <!-- {{ outdata }} -->
        <br>
        <button @click="change">Change the value of the parent component</button>

    </div>
</template>

<script>
    export default {
        props:{
            outdata:{
                type:String,
                default:''
            }
        },
        data(){
            return{

            }
        },
        methods:{
           change(){
                // Two parameter 1: custom event name parameter 2: value passed to parent component  
               this.$emit('changeNew',"I was changed!")
           } 
        }
    }
</script>

The second way is to use the v-model instruction on the child component

Parent component template
-----

<template>
  <div id="app">
    {{ a }}
    <!-- Use component use v-model -->
    <three :outdata="a" v-model="a"/>

  </div>
</template>
<script>

import three from './components/three'

export default {
  components:{
    three
  },
  data(){
    return {
      a:"I am the value of the parent component"
    }
  },
  methods:{
    changeA(event){
      this.a = event
    }
  }
}
</script>

Subcomponent template
-----

<template>
    <div class="three">

        <!-- {{ outdata }} -->
        <br>
        <button @click="change">Change the value of the parent component</button>

    </div>
</template>

<script>
    export default {
        props:{
            outdata:{
                type:String,
                default:''
            }
        },
        data(){
            return{

            }
        },
        methods:{
           change(){
               //Pass in a special input 
               this.$emit('input',"I was changed!")
           } 
        }
    }
</script>