Как получить функцию из родительского компонента?

Question

[Виктор]

parent component

<script setup>
...
const uploading = ref(false);
const temporaryFiles = ref([]);
function isAllUploading() {
    let uploading = false;
    let uploadingList = [];
    temporaryFiles.value.forEach(cur => uploadingList.push(cur.status));
    if (uploadingList.includes('uploading')) return true;
    return uploading;
}
...
</script>

child component

<script setup>
...
function destroy(index, file, type){


    URL.revokeObjectURL(file);
    props.i_items.splice(index, 1);
    props.i_files.splice(index, 1);
   if(isAllUploading()) uploading = false;

}
...
</script>

Как получить в child component функцию isAllUploading и uploading из родительского компонента?

Answer 1

[SymphoGraph]

Добавьте provide и inject в родителя и потомка

// parent component
provide('isAllUploading', isAllUploading)

// child component
const isAllUploading = inject('isAllUploading')

Answer 2

[Алексей Ярков]

Через props. Вы документацию читали?

Comments

[Виктор]

Напишите пожалуйста ссылку на раздел в документации

[Алексей Ярков]

Виктор, жесть какая... Вот, держите ссылку.

[Виктор]

Не не получается, документация мало чем помогла, в vue2 это работает как

export default {
destroy: function(index, file, type){
            URL.revokeObjectURL(file);
            this.items.splice(index, 1);
            this.files.splice(index, 1);
            if(!this.$parent.isAllUploading()) this.$parent.$data.uploading = false;
        },
}

в обертке <script setup>это не работает

[Алексей Ярков]

Виктор, за this.$parent надо руки отрывать. Идите читать документацию по моей ссылке. В вашем примере нет props.

[Виктор]

Сделал так, передал функцию и переменную в parent component

<template>
...
        <Items :i_files="files" :i_items="temporaryFiles" :isAllUploading="isAllUploading" :uploading="uploading" />
...
</template>

и в child component

<script setup>
...
const props = defineProps({
        i_items: Array,
        i_files: Array,
       isAllUploading: Function,
       uploading: Boolean,
  })
console.log(props);
function destroy(index, file, type){
    URL.revokeObjectURL(file);
    props.i_items.splice(index, 1);
    props.i_files.splice(index, 1);
    if(!props.isAllUploading()) props.uploading = false;
}
...
</script>

Так?