从组件到页面获取价值

Question

我有一个nuxt.JS应用程序。在此应用中，我试图接收页面的数据成分，

以下是组件：

<template>
  <div
    class="base-image-input"
    :style="{ 'background-image': `url(${imageData.split('\\').join('\/')})`}"
    @click="chooseImage"
  >
    <input class="file-input" ref="fileInput" type="file" @input="onSelectFile" accept="image/*">
  </div>
</template>

<script>
import { setTimeout } from 'timers';
export default {
    props:[
        'image'
    ],
  data() {
    return {
      imageData: (this.image != null)? this.image : '/uploads/profile-default.jpg'
    };
  },
  methods: {
    chooseImage() {
      this.$refs.fileInput.click();
    },
    onSelectFile() {
      const input = this.$refs.fileInput;
      const files = input.files;
      if (files && files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
          this.imageData = e.target.result;
        };
        reader.readAsDataURL(files[0]);
        this.$emit("selImage", files[0]);
      }

      console.log('image data is showing', this.imageData)
    }
  },

  watch:{
      image(newImage){
          if(typeof(newImage) === "string"){
            this.imageData = newImage
          }
      }
  }


};
</script>

我正在尝试将所选图像接收到我的父组件 在这里，我尝试使用Emit发送图像文件：

reader.readAsDataURL(files[0]);
this.$emit("selImage", files[0]); 

如何将值获取到我的页面。