【问题标题】：Get value from emit in input field with Vue使用Vue从输入字段中的emit中获取值
【发布时间】：2019-01-24 17:42:15
【问题描述】：

我知道这有一个简单的答案，但我似乎被卡住了。我在表单中有一个上传图片输入。按照几个教程，我已经成功创建了上传方法。我的问题是图像上传到 Firestore 存储后，我使用 this.$emit('imgurl', downloadURL)

我的问题是我不知道如何获取该值，因此当用户提交表单时，URL 会被添加到数据库中。

部分代码：

HTML：

<div class="field avatar">
    <label for="avatar">Avatar</label>
    <input type="file" name="imgurl" accept="image/*" @change="detectFiles($event.target.files)">
    <div class="progress-bar green" :style="{ width: progressUpload + '%'}">{{ progressUpload }}%</div>
    <img class="avatar" v-bind:src="this.downloadURL">
</div>

方法：

detectFiles (fileList) {
    Array.from(Array(fileList.length).keys()).map( x => {
        this.upload(fileList[x])
    })
},
upload (file) {
    var storage = firebase.storage();
    this.uploadTask = storage.ref('avatars/'+file.name).put(file);
}

观看：

watch: {
        uploadTask: function() {
            this.uploadTask.on('state_changed', sp => {
                this.progressUpload = Math.floor(sp.bytesTransferred / sp.totalBytes * 100)
            }, 
            null, 
            () => {
                this.uploadTask.snapshot.ref.getDownloadURL().then(downloadURL => {
                    this.downloadURL = downloadURL
                    this.$emit('imgurl', downloadURL)

                })
            })
        }
    }

添加到数据库：

db.collection('teams').add({
    team_name: this.team_name,
    team_id: this.team_id,
    bio: this.bio,
    url: this.imgurl,
}).then(() => {
   this.$router.push({ name: 'Admin' })
}).catch(err => {
   console.log(err)
})

【问题讨论】：

标签： javascript vue.js google-cloud-firestore vue-component

【解决方案1】：

您可以将函数作为道具传递给子组件，然后调用此函数并将您的 downloadURL 作为参数传递。

父组件

HTML

<child passURL="getDownloadURL">

data: {
    return {
        downloadURL: null
    }
},
methods: {
    getDownloadURL: function(url) {
        this.downloadURL = url
    }
}

子组件

props: ['passURL'],

在你的watcher里面，你可以调用

this.passURL(downloadURL)

而不是 $emit。

【讨论】：

【解决方案2】：

我找到了答案。我添加了一个隐藏的输入字段 <input type="hidden" name="imgurl" v-model="imgurl"> 并将发射替换为this.imgurl = downloadURL

【讨论】：

您是如何从您的子组件中获取imgurl 的？你可以用 Vue 的方式来做到这一点。