Vuejs将值从实例传递给组件

Question

我想将一个值从我的vue实例传递给我的vue组件。

我有以下vue组件（vuejs dropzonejs组件），它基本上是一个很好的图像上传ui。

<template>
    <vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
</template>

<script>
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.css'

export default {
    name: 'app',
    components: {
        vueDropzone: vue2Dropzone
    },
    data: function() {
        return {
            game: {
                title: ''
            },
            dropzoneOptions: {
                url: '/games/upload',
                method: 'post',
                params: {
                    title: this.game.title
                }
            }
        }
    },
    methods: {
        processFiles () {
            this.$refs.myVueDropzone.processQueue();
        },

        getGameTitle () {
            this.game.title = '',
        }
    }
}
</script>

我需要从我的vue实例中获取游戏标题并将其传递给我的vue组件，以便我可以在那里使用该标题做一些工作。

我的vue实例看起来像这样：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('vue-dropzone', require('./components/ImageDropzoneComponent.vue'));

const app = new Vue({
    el: '#app',

    data: {
        loading: false,
        title: '',
    },

    methods: {
        createGame (e) {
            this.uploadImage();
            axios.post('/games',  {
                title: this.title,
            })
            .then((response) => {
                console.log(response.data);
            })
            .catch((error) => {
                console.log(error);
            })
        },

        uploadImage () {
            this.$refs.myVueDropzone.processFiles()
        },

        getGameTitle () {
            return this.title;
        }

    }
});

标签：

<vue-dropzone ref="myVueDropzone"></vue-dropzone>