-1

这是父组件：

<template>
    <upload-block 
    :imSrc="LargeIcon"
    inputName="LargeIcon"
    :inputHandler="uploadAppIcon"
    inputRef="LargeIcon"
    :uploadClickHandler="handleUploadIcon"></upload-block>
</template>

<script>
export default class ParentCom extends Vue {
    //all props for <upload-block></upload-block> component defined here

    handleUploadIcon(event) {
        const icon_type = event.currentTarget.getAttribute("data-type");
        let appImgElem = this.$refs[icon_type];
        appImgElem.click();
    }

    async uploadAppIcon(event) {
        //code
    }
}
</script>

这是子组件：

<template>
    <div class="upload-div" @click="uploadClickHandler" :data-type="inputName">
        <img v-if="imSrc" :src="imSrc">
        <div v-else class="upload-icon-block">
        <span>
            <font-awesome-icon class="upload-icon" icon="arrow-circle-up" size="lg"></font-awesome-icon>
            <br>Click to upload
        </span>
        </div>
        <!-- <spinner variant="primary" :show="true"></spinner> -->
        <input style="display:none" type="file" :ref="inputRef" :name="inputName" @input="inputHandler">
    </div>
</template>

<script>

@Component({
    props: {
        imSrc: String,
        inputRef: String,
        inputName: String,
        inputHandler: Function,
        uploadClickHandler: Function
    }
})
export default class ChicdCom extends Vue {

}
</script>

我handleUploadIcon在无法input通过ref. 它显示Cannot read property 'click' of undefined在这一行appImgElem.click(); 但是当我将文件输入移动到父组件时，它工作正常。那么，您能帮我如何将 ref 设置为来自父级的子组件元素，因为它目前没有设置。谢谢

4

1 回答 1

2

那么你可以在父组件中添加ref一个upload-block：

<upload-block ref="upload" ... >

然后在handleUploadIcon您可以访问您的输入：this.$refs.upload.$refs[icon_type]

但如果我是你，我会尝试移动handleUploadIcon到子组件。

于 2019-06-19T08:58:03.220 回答