vue父子组件之间传值

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: '父组件给子组件的数据',
      childData: '用来存放子组件传回给父组件的数据',
    };
  },
  methods: {
    getChildData(childData) {
      console.log(childData);
    }
  }
}
</script> 

child.vue 子组件

<template>
  <div>
    <h1>子组件</h1>
    <p>从父组件传过来的数据：{{parentToChildData}}</p>
    <button @click="sonClick">点击按钮传数据回父组件</button>
  </div>
</template>
<script>
export default {
  props: ['parentToChildData'],
  data () {
    return {
      childData:'返回给父组件的值'
    };
  },
methods:{
    sonClick () {
      this.$emit('childToParentData', this.childData);
    }}
}
</script>