如何在 vuejs 中将 $ref 设置为来自父组件的子组件元素？答案

【问题标题】：How to set $ref to child component elements from parent component in vuejs?如何在 vuejs 中将 $ref 设置为来自父组件的子组件元素？
【发布时间】：2019-11-01 19:08:09
【问题描述】：

这是父组件：

<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 方法中面临的问题是我无法通过ref 获取input 元素。它在这一行显示Cannot read property 'click' of undefined appImgElem.click(); 但是当我将文件输入移动到父组件时，它工作正常。那么，您能否请帮助我如何将 ref 设置为来自父级的子组件元素，因为目前它没有设置。谢谢

【问题讨论】：

标签： vue.js vue-class-components

【解决方案1】：

您可以在父组件中将ref 添加到upload-block：

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

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

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

【讨论】：