javascript - Vuejs 从实例更改组件中的 prop 值

Question

我想从我的 vue 实例更改 vue 组件中的 prop 值。

这样我就可以在我的组件中使用标题值。

组件:

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

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

export default {
    name: 'app',

    components: {
        vueDropzone: vue2Dropzone
    },

    props: ['title'], // title shall update so that I can use the value as a param below

    data () {
        return {
            dropzoneOptions: {
                method: 'post',
                title: this.title
            }
        }
    },
}
</script>

我更改标题值的实例:

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

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

    data: {
        title: '',
    },

    methods: {
        foo (e) {
            console.log(this.title); // has correct value but how to pass to vue component (prop)
        },
    }
});


<vue-dropzone ref="uploadDropzone" :title="title"></vue-dropzone>

Answer 1

考虑将 dropzoneOptions 更改为计算属性，就像这样。

import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.css'

export default {
    name: 'app',

    components: {
        vueDropzone: vue2Dropzone
    },

    props: ['title'], // title shall update so that I can use the value as a param below

    computed:
        dropZoneOptions() { // dropZoneOptions recomputes when props.title changes
            return {
                method: 'post',
                title: this.title
            }
        }
    },
}

或者，您可以考虑使用观察者并根据更改修改数据，但发布原始代码后，我相信这可能是最佳途径。

查看 https://v2.vuejs.org/v2/guide/computed.html有关计算属性和观察者的信息。