Vue 组件：props 未定义

Posted 2023-02-23

【中文标题】Vue 组件：props 未定义

【英文标题】：Vue components: props undefinded

【发布时间】：2020-08-26 19:54:04

【问题描述】：

当我想将我的变量作为道具从一个 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 提供来自另一个页面文件的值。最后，我需要这些值是临时且可变的。我也想到了会话，但我想先用组件尝试一下。大家觉得呢？

【问题讨论】：

你能把它转换成 Codepen/Codesandbox/Jsfiddle 吗？否则可能会看看 Vuex - 用于传递数据（即使是暂时的）。我也使用 Vue 事件进行简单的状态管理。

【参考方案1】：

在 LadevorgangAendern.vue 中，尝试

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

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

https://vuex.vuejs.org/

【讨论】：

不幸的是，这也不起作用。我会尝试与状态。希望这行得通。谢谢！