vue全局组件-父子组件传值

全局组件注册方式：Vue.component(组件名,{方法})

demo: 子组件：upload.vue

<template>
  <div >
    <div class="file_box">
      <input type="file" v-on:change="upload">点击上传
    </div>
    {{fileName}}
  </div>
</template>
<script>
  //模拟上传地址
  import Mock from 'mockjs'
  Mock.mock('https://www.test.com/api/upload',{});

  export default {
    //接受父组件传入的参数
     props: {
      uploadURL: {
        type: String,
        default: 'https://api.github.com'
      }
    },
    data () {
      return {
        fileName: ''
      }
    },
    methods: {
      upload(e) {
        var fileupload = e.target.files[0];
        this.fileName = fileupload.name;
        let a = s3.upload(fileupload,{},'https://www.test.com/api/upload');
        //此处用箭头函数内部可用this,否则在外部定义that=this，使用that
        a.then(res => {
         // 将上传结果传回父组件中的回调函数
          this.$emit('uploadstatus',res)
        })
      },
    }
  }
</script>
<style>
  .file_box {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0;
    transition: .1s;
    text-indent: 0;
    line-height: 20px;
    padding: 6px 16px;
    font-size: 12px;
    border-radius: 3px;
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
  .file_box input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
  }
  .file_box:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff;
  }
</style>
    

父组件中使用：

<template>
  <div>
      <!--上传文件组件-->
      <up-load :uploadURL = '222222222222'  v-on:uploadstatus="uploads" >    </up-load>
  </div>
</template>
<script>
//上传文件
import upLoad from './../components/upLoad.vue'
export default {
  name: 'Home',
  data () {
    return {
      uoloadstatus:''
    }
  },
  methods: {
    //上传文件组件
    uploads:function (res) {
        // 接收从子组件传过来的当前对象
        console.log(res);
    },
  },
  components: {
    upLoad
  }
}
</script>