Vuejs用参数调用其他组件的方法

Question

我有两个组件，第一个用于上传文件，第二个用于显示文件。在我的上传组件中，我想调用预览组件并添加一个参数，以便预览组件中的方法使用在上传组件中创建的值。

到目前为止，我已经这样做了：

上传组件.vue

<template>
    …
    <button @click="upload"></button>
    <preview-component :url="this.location"></preview-component>
</template >

<script>
import PreviewComponent from '@/js/components/PreviewComponent';

export default {
    components: {
        'preview-component': PreviewComponent
    },

    props: ['url'],

    data () {
        return {
            // ...
            location: ''
        }
    },

    methods: {
        upload() {
            // ... upload stuff then update the global var location
            this.location = response.data.location;
        },
    }

}
</script>

这是我的预览组件：

<template>
    <div id="body">
        ///...
    </div>
</template>

<script>
export default {
    props: ['url'],

    methods: {
        loadPdf (url) {
            //
        },
    }    
}
</script>

到目前为止，我收到了 url 未定义的错误，所以它实际上并没有将 url 从 UploadCOmponent 发送到 PreviewComponent，我该如何发送它？

Answer 1

UploadComponent 的模板中有一个忍者 this。

应该是<preview-component :url="location"></preview-component>