Vuejs使用参数

时间:2019-03-29 14:03:37

标签: javascript vue.js vue-component

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

到目前为止,我已经做到了:

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,我如何设法发送它?

1 个答案:

答案 0 :(得分:0)

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

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