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 urwid
from functools import partial


class State(object):
    param1 = 1
    param2 = 'ola'

    def __repr__(self):
        return 'State(param1={}, param2={})'.format(self.param1, self.param2)


def show_or_exit(app_state, key):
    if key in ('q', 'Q'):
        raise urwid.ExitMainLoop()
    app_state.param1 += 1
    txt.set_text('key: {!r} state: {!r}'.format(key, app_state))


txt = urwid.Text(u"Hello World")
fill = urwid.Filler(txt, 'top')
app_state = State()
callback = partial(show_or_exit, app_state)
loop = urwid.MainLoop(fill, unhandled_input=callback)
loop.run()

或者，您可以考虑观察者并修改有关更改的数据，但发布原始代码后，我相信这可能是最佳路线。

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

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

1 个答案: