关于vue中子组件给父组件传值

子组件页面---------》EditList:

<template>
  <div class="editList">
    <el-button type="primary" @click="goListPage">我是子组件</el-button>
  </div>
</template>

<script>
export default {
  name: 'EditList',
  data(){
    return {
      sonVal:'我是来自子组件的值'
    }
  },
  methods:{
    goListPage(){
      this.$emit('eventChange',this.sonVal)
    }
  }
}
</script>

父组件页面-----》list：

<template>
  <div class="list">
      <h3>父组件页面</h3>
       <!-- 3、使用子组件 -->
      <EditeList @eventChange="showVal($event)"/>
  </div>
</template>

<script>
// 1、引入子组件
import EditeList from '@/components/EditList'
export default {
  name: 'List',
  data(){
    return {
    }
  },
  methods:{
    showVal(data){
      console.log("子组件传递的值是：",data)
    }
  },
  components:{
    // 2、注册子组件
    EditeList
  }
}
</script>