Javascript Vue js在子组件之间发送图像blob并显示图像预览

这个结构有三个组成部分

1.ParrentComponent(
  -1.ChildComponent
  -2.Child
)

1.子组件通过文件输入加载图像，并在该控制器中进行预览。单击“提交”按钮后，我需要将此blob图像发送给第二个孩子，并在那里显示预览

我的问题是，当我将图像发送到第二个子url时，图像中的url是相同的，但图像不显示，只是显示了alt

1.儿童：

<template>
    <div id="insert-component">
        <div id="insert-new" >
            <h2 class="text-md-left">Nová kategória</h2>
            <div class="mt-2 text-left">
                <a href="#" id="img-button" class=" d-flex flex-wrap" v-on:click.stop="loadImage()">
                    <img v-bind:src="category_img" alt="logo" id="preview">
                    <input type="file" class="d-none" id="load-category-image"  v-on:input="handleFileSelected">
                    <button class="btn btn-dark btn-block" >Pridať obrázok</button>
                </a>
                <small class="text-danger d-none error" id="img-error">Súbor musí byť png, jpg alebo jpeg</small>
            </div>
            <div class="form-group mt-2 text-left">
                <div>
                <label for="category_name">Názov kategórie:</label>
                <input type="text" required name="name" class="form-control" v-model="category_name" id="category_name">
                <small class="text-danger d-none error"  id="name-error">*Názov je povinný</small>
                </div>
                <label for="category_description" class="mt-2">Popis kategórie:</label>
                <textarea name="description" class="form-control" rows="4" v-model="category_description" id="category_description">
                </textarea>
            </div>
        </div>
        <button class="btn btn-success btn-block my-2" v-on:click.prevent="submit()">Pridať kategóriu</button>
    </div>
</template>

<script>
    export default {
        name: "InsertComponent",
        props: [ 'updateTableData' ],
        data: function () {
            return {
                category_name: "",
                category_description: "",
                category_img:"/storage/images/no_image.png",
                file:null
            }
        },
        methods: {
            loadImage(){
                document.getElementById('load-category-image').click();
            },
            submit(){
                if(this.checkIfEmptyById('category_name')){
                    this.showErrors('name-error');
                    return
                }
                let item = this.createNewItem();
                this.updateTableData(item);
                this.clearInputs();
            },
            createNewItem(){
                return {
                    category_img: this.category_img,
                    category_name: this.category_name,
                    category_description: this.category_description,
                    created_at: null,
                    updated_at: null,
                    id: null,
                    file:this.file
                };
            },
            clearInputs(){
              this.category_name="";
              this.category_description="";
              this.category_img="/storage/images/no_image.png";
            },
            handleFileSelected() {
                let loadedFile = document.getElementById('load-category-image').files[0];
                if(this.checkIfFileIsImage(loadedFile))
                {
                    this.file = loadedFile;
                    //this.category_img="/storage/images/"+loadedFile.name;
                    this.changeImagePreview();
                }
                else{
                    //show image error
                    let imgError = document.getElementById('img-error');
                    imgError.classList.remove('d-none');
                }
            },
            checkIfFileIsImage(file){
                const acceptedImageTypes = ['image/jpg', 'image/jpeg', 'image/png'];
                return acceptedImageTypes.includes(file['type']);
            },
            changeImagePreview(){
                let loadedFile = document.getElementById('load-category-image').files;
                this.category_img = URL.createObjectURL(loadedFile[0]);
            },
        },
    }
</script>

第二个孩子：

<template>
    <div class="text-center">
        <b-table striped hover :items="items" :fields="fields">
            <template v-slot:cell(category_img)="data">
                <img v-bind:src="'/storage/images/'+data.item.category_img" alt="img" width="50px" height="50px" class="rounded-circle">
            </template>
            <template v-slot:cell(category_name)="data">
                {{data.item.category_name | capitalize}}
            </template>
            <template v-slot:cell(category_description)="data">
                {{data.item.category_description | capitalize}}
            </template>
            <template v-slot:cell(actions)="data">
                <div class="d-flex justify-content-center">
                <a href="#" class="btn btn-info mr-1"><i class="fas fa-edit"></i></a>
                <a href="#" class="btn btn-danger"><i class="fas fa-times-circle"></i></a>
                </div>
            </template>
        </b-table>
    </div>
</template>

<script>
    export default {
        name:"TableComponent",
        props: ['tableData'],
        data() {
            return {
                fields: [
                    {
                        key: 'category_img',
                        label:'Img',
                        sortable: false
                    },
                    {
                        key: 'category_name',
                        label:'Name',
                        tdClass: 'capitalize-first-letter',
                        sortable: true,
                        variant: 'dark'
                    },
                    {
                        key: 'category_description',
                        thClass: 'd-none d-md-block',
                        tdClass: 'd-none d-md-block text-left',
                        label:'Description',
                        sortable: false,
                    },
                    {
                        key: 'actions',
                        sortable: false,
                    }
                ],
                items: this.tableData
            }
        },

部分组件只是在这些组件之间传递数据，数据是否传递良好并不重要。问题就在于这个形象。Thx求救

这看起来像：右边的孩子1，左边的孩子2

---

如果我错了，请更正，但在您的孩子身上，您将函数作为道具传递，而在vue中这是一种反模式。您应该始终遵循道具向下事件向上的设计模式

不管怎样，继续解决你的问题。关于你的孩子2，你有以下几行

items: this.tableData

此行将把This.tableData的值分配给项。这仅在构件的已创建挂钩零件上指定。如果这个表的数据发生了变化，我敢肯定它确实发生了变化，那么item变量将不会被更新。你应该有一只手表监视道具并重新分配给道具

---

1.该图案的尖端为Tsx。2：是的，但是我的组件现在正在更新。更新新数据没有问题。现在可以了。问题只存在于这张图片中，你们可以在上面的图片中看到。。。右边的预览是可以的，但前面两行的img列左边的预览是不可以的。在右边，img只是一个斑点，我只是从我的电脑上选择它，它只是预览，没有保存。你有没有试过在chrome上检查它，看到：src=“…”的值。。。我有重复的src地址开始在左侧。Thx用于help@YoungL. 如果这个答案有助于你解决问题，请将其标记为正确答案

watch: {
  tableData: (value) => {
    this.item = value;
  }
}