Vue组件Props未渲染求助：父组件传值子组件不生效

你的代码存在两个关键问题导致props未被正确解析：

1. Input组件的属性绑定方式错误 #

Vue中不能在HTML属性值内使用{{ }}插值语法来绑定数据，这种写法只会被当作普通字符串输出。正确的做法是使用v-bind:（或简写:）指令来绑定HTML属性。

修正后的Input.vue模板： #

<template>
    <input :type="type" :placeholder="placeholder" :value="value"/>
</template>

2. 父组件传递字符串props的写法错误 #

在LoginPage.vue中，你用:type="text"这种带冒号的写法，Vue会把text当作组件的响应式变量来解析，但你并没有在LoginPage的data中定义这个变量。如果要传递普通字符串值，有两种写法：

• 去掉冒号，直接写type="text"
• 保留冒号，用单引号包裹字符串，写成:type="'text'"

修正后的LoginPage.vue模板： #

<template>
    <Card>
        <template v-slot:title>Sign in</template>
        <template v-slot:content>
            <!-- 写法1：去掉冒号直接传字符串 -->
            <Input type="text" placeholder="Email"></Input>
            <!-- 写法2：用冒号加单引号传字符串 -->
            <!-- <Input :type="'text'" :placeholder="'Email'"></Input> -->
        </template>
    </Card>
</template>

修正这两处后，props就能被正确解析并渲染到input标签的属性中了。

内容的提问来源于stack exchange，提问作者Alexander Schillemans