Vue.js中Props始终返回undefined的问题求助

你的代码核心问题是Props的定义位置错误——你把opendiv和rid这两个Props声明在了根Vue实例上，而不是login组件的内部选项中。Vue组件只会识别自身选项里声明的Props，所以组件内部自然无法获取到这两个值。

修复步骤 #

1. 将Props声明移至login组件内部 #

把原来写在根实例的props选项，转移到login组件的定义中：

const app = new Vue({
    el: '#app',
    components: {
        'login': {
            // 在这里声明组件自己的Props
            props: {
                opendiv: String,
                rid: String,
            },
            data() {
                return {
                    mode: this.opendiv, // 现在可以正确获取Props值
                    email: "",
                    username: "",
                    password: "",
                    confirmPassword: "",
                }
            },
            template: `<div>
              <!-- 你的模板内容 -->
            </div>`,
            mounted() {
                console.log(this.opendiv, this.rid); // 此时能输出正确的"password"和"123"
            }
        }
    }
});

2. 组件调用的注意事项 #

你当前的组件调用写法是正确的：

<login opendiv="password" rid="123"></login>

如果需要传递动态变量（而非静态字符串），要使用v-bind（简写:），比如：

<!-- 假设父组件有data: { passwordMode: 'password', userId: '123' } -->
<login :opendiv="passwordMode" :rid="userId"></login>

关键原理 #

Vue组件的Props必须在自身的选项中声明，这样Vue才会将父组件传递的对应属性注入到组件实例中，你才能通过this.xxx访问到Props的值。根实例的Props和子组件的Props是完全独立的，不能混淆。

内容的提问来源于stack exchange，提问作者The Hawk