Question

我需要将id参数传递给我的组件并调用其更新（重新发送->而无需重新加载页面）

我有一个具有化身加载方法的组件

settings.vue

<template>
... download form and button with onUploadImg method 
</template>

<script>

methods: {
    onUploadImg() {
        if(this.avatarFile == null) return;
        var formData = new FormData();
        formData.append("file", this.avatarFile);        
        axios.post('urlForPost',
          formData,
          {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
          .then(response => {
              //response Ok, show message and reload img on this page
               this.$nextTick(() => {
                   //Need send new FileId from image to MyVueAvatar.vue and update him
                   localStorage.setItem('picture', response.data); //can be through local storage?
               })
            })
            .catch(error => {
                 console.log(error);
      });
    }
}
</script>

OrderContainer.vue

<template>
    <my-vue-avatar class="img-avatar" :id="this.avatarPicId"></my-vue-avatar>
....
</template>
<script>
import MyVueAvatar from '../Avatar'
....
</script>

MyVueAvatar.vue（如果已将新的头像上传到settings.vue，则需要更新此组件）

<template>
    <div>
        <img :src="`data:image/png;base64, ${file}`" class="img-avatar" style="height: 35px;"  />
    </div>
</template>

<script>
import axios from 'axios'
export default  {
    props: {
        id: null
    },
    data: () => {
        return { 
            file: null
        }
    },
    created() {
        this.onGetImage(this.id);
    },
    methods: {
        onGetImage(id) {
            if (id == null) return;        
            axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('jwt');
            axios.get('url/File/Get/' + id,
            {
                responseType: 'arraybuffer'
            })
            .then(r =>
            {
                var buffer = new Buffer(r.data, 'binary').toString('base64');
                this.file = buffer;
            })
            .catch(error => {
                console.log(error);
            });
        }
    }
}
</script>

该怎么办？

Answer 1

您要传递给props的{{1}}应该是被动的。如果您仍然想在MyVueAvatar每次更改时引起MyVueAvatar的完全重新渲染，这有点麻烦，但是您可以使用v-if指令来延迟渲染/重新渲染您的子组件：

在avatarPicId和settings.vue之间建立连接，您可以选择几种方法，下面是使用vue orderContainer.vue的示例：

在eventBus内部，只要Settings.vue发生变化：

id

，另一方面，this.$eventBus/*or whatever you named your eventBus*/.$emit('idChange',id);将收听此更改：

orderContainer.vue

组件接受道具时的forceUpdate VueJS

1 个答案: