[聚合文章] web前端vue：子组件向父组件传递数据

在这里先祝大家2018元旦快乐，2017没完成的事，我们2018不忘初心继续前行。

上次我们说到了vue的组件之间父组件向子组件传递数据（用了props）这次我们反过来，来说说子组件向父组件传递数据（没看到上一篇的同学可以先去看看），其实用起来都大同小异很相似，我们还是直接看例子如下：

b.vue子组件

<template>
    <input type="file" id="uploadBtn" value="上传" @change="uploadFunOK">   // 用oss上传
</template>
export default{
    data(){
        OSSauthorizationobj: [] // oss配置
    },    

    methods:{
        uploadFunOK (file) {
            let input =document.getElementById('uploadBtn')
            let filePathName =this.OSSauthorizationobj.dir +'/' +当前的时间戳
            let data =new FormData()
            data.append('key', filePathName)
            data.append('OSSAccessKeyId', this.OSSauthorizationobj.accessid)
            data.append('policy', this.OSSauthorizationobj.policy)
            data.append('Signature', this.OSSauthorizationobj.signature)
            data.append('success_action_status', '200')
            data.append('file', input.files[0])
            let oReq =new XMLHttpRequest()
            oReq.open("POST", this.getfileUrl, true)
            oReq.onload =function() {
                if (oReq.status ==200) {
                    let url = _this.OSSauthorizationobj.realhost +'/' +filePathName
                    this.$emit('onclick', url)
                }
            }
        }
    }
}
我这里用了oss＋H5的FormData()自带的上传方式，如果不懂oss的同学可以去阿里云官方上去看看，不懂H5 FormData()自带的上传函数的可以网上搜索下学习下，有助于编写自己的上传组件。
a.vue父组件
引入b子组件import b form 'b.vue'
components: {'up-button': b} // 注册，记得这里只能在当前a组件里使用，当然也可以去注册成全局的
的<up-button :onclick='upfun(方法)'></up-button>
export default{
    data(){urls:''}  // url可以是字符可以数组（就可以多张图片了）
    methods: {
        upfun(url){ 
            this.urls = url  // 字符  
            this.urls.push(url) // 数组添加方式
        }
    }
}
这里用了一个上传组件向大家展示了，整个的子组件向父组件传播数据的例子，用到了oss+H5FormData()自带上传函数和vue关键词$emit，大家可以自行封装一个上传组件试试看。

有不懂的或对vue有兴趣的同学可以加我（微信：nihaomeili87）我们一起交流学习。再次祝大家新的一年里想学啥，啥都能学会