通过在子组件中自定义事件,并将事件信息发送回父组件就可以实现子组件向父组件通信。

例如,在点击按钮时向父组件发送age递增的事件,在父组件层面进行age++,再自动同步到子组件:

 
<script>  
export default {  
  name: 'app',  
  props: ['age'],  
  methods: {  
    onClickAge() {  
      this.$emit('incrementAge')  
    }  }}  
</script>  
  
<template>  
  <div>  
    <button @click="onClickAge">Increment Age</button>  
    <p>{{age}}</p>  
  </div>  
</template>
 
<script>  
import HelloWorld from '@/components/HelloWorld.vue'  
  
export default {  
  data() {  
    return {  
      age: 10  
    }  
  }}  
</script>  
  
<template>  
  <HelloWorld :age="age" @incrementAge="age++"/>  
</template>