Как установить $ ref для дочерних элементов компонента из родительского компонента в vuejs? - PullRequest
Новая
       19

Как установить $ ref для дочерних элементов компонента из родительского компонента в vuejs?

0 голосов
/ 19 июня 2019

Это родительский компонент: 

<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(); Но когда я перемещаю файл ввода в родительский компонент, он работает нормально. Так что вы можете помочь мне, как установить ссылку на дочерние компоненты компонента из родительского элемента, так как в настоящее время он не устанавливается. Спасибо

1 Ответ

2 голосов
/ 19 июня 2019

Ну, вы можете добавить ref к upload-block в родительском компоненте: 

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

Затем в handleUploadIcon вы можете получить доступ к вашему вводу: this.$refs.upload.$refs[icon_type]

Но я бы попробовал переместить handleUploadIcon на дочерний компонент на вашем месте.

...