parent.vue 父組件：

<template>
  <div>
    <h1>父組件</h1>
    <child :parentToChildData="parentData" @childToParentData="getChildData"></child>
  </div>
</template>
 
<script>
import child from '@/components/child'
export default {
  components:{child},
  data () {
    return {
      parentData: '父組件給子組件的數(shù)據(jù)',
      childData: '用來(lái)存放子組件傳回給父組件的數(shù)據(jù)',
    };
  },
  methods: {
    getChildData(childData) {
      console.log(childData);
    }
  }
}
</script> 

child.vue 子組件

<template>
  <div>
    <h1>子組件</h1>
    <p>從父組件傳過(guò)來(lái)的數(shù)據(jù)：{{parentToChildData}}</p>
    <button @click="sonClick">點(diǎn)擊按鈕傳數(shù)據(jù)回父組件</button>
  </div>
</template>
<script>
export default {
  props: ['parentToChildData'],
  data () {
    return {
      childData:'返回給父組件的值'
    };
  },
methods:{
    sonClick () {
      this.$emit('childToParentData', this.childData);
    }}
}
</script>