Question

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

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

UploadComponent.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

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

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

Vuejs使用参数

1 个答案: