Vue组件：未确定的道具

Question

当我想把我的变量作为道具从一个vue.js文件中获取到antoher中时，它不能工作。我看到这个问题很常见，但答案对我没有帮助。我看不出我的代码有什么问题，也许你可以看看。

ladedaten. vue: (路径: src/components/ladedaten.vue)

<template>
    <div id="Ladedaten">
        <LadevorgangAendern v-bind:preis="preis"/>  
    </div>
</template>

<script>
import LadevorgangAendern from '../pages/LadevorgangAendern.vue'

export default {
    name: 'Ladedaten',
    components: {LadevorgangAendern},
    data() {
        return {
        preis: 15,           

        }
    },  
}
</script>

LadevorgangAendern.vue (路径： src/pages/LevadorgangAendern.vue)

<template>
    <!--Stuff here-->
    <p>Preis: {{preis}}</p>
</template>

<script>
//some imports here

export default {
    name: 'LadevorgangAendern',
    props: ['preis'],

    data() {
        return {
            //variables 
        }
    }
}

//more stuff here
</script>

事实上，我甚至不确定组件是否是我需要的。我想暂时存储数据，所以当这个工作时，我计划用另一个pages-file中的值再次用道具来喂养ladaten.vue。最后，我需要这些值是暂时的和可改变的。我也想过用会话，但我想先用组件试试。你们怎么看？

Answer 1

在LadevorgangAendern.vue中，尝试一下

<p>Preis: {{ this.preis }}</p>

也许可以尝试在你的应用程序中加入vuex状态管理。根据你想访问数据的频率或地点，它是一个很好的方法，可以在整个应用程序中创建一个单一的状态，而不必不断地将道具传下来或发射回去或使用事件总线。

https:/vuex.vuejs.org