Vue 组件：props 未定义

Question

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

ladaten.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\LadevorgangAendern.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>

事实上，我什至不确定组件是否是我需要的。 我想暂时存储数据，所以当这工作时，我计划再次使用道具为 ladaten.vue 提供来自另一个页面文件的值。 最后，我需要这些值是临时且可变的。 我也想到了会话，但我想先用组件尝试一下。 你们有什么感想？

Answer 1

在 LadevorgangAendern.vue 中，尝试

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

也许尝试在您的应用程序中包含 vuex state 管理。 根据您想要访问数据的频率或位置，这是在整个应用程序中创建单个 state 的好方法，而无需不断向下传递道具或将它们重新发射或使用事件总线。

https://vuex.vuejs.org/