Vue组件传递Props值始终显示默认值，求问题排查方案

嘿，我一眼就看出问题出在哪了——你在父组件传递props的方式不对，导致组件接收不到你想传的值，只能 fallback 到默认值。具体来说有这几个关键点：

1. 字符串字面量的传递语法错误 #

你写的 <inputField :label="Hola" :name="nombre" /> 里，:label="Hola" 用了v-bind语法（冒号是v-bind的简写），Vue会把Hola当作父组件实例里的变量名，而不是字符串字面量。如果你的父组件里没有定义Hola和nombre这两个变量，Vue就会把它们解析成undefined，这时候组件就会使用你预设的默认值。

正确的传递方式分两种： #

• 如果是直接传字符串，不需要用v-bind，直接写：

  <inputField label="Hola" name="nombre" />
  

• 如果一定要用v-bind（比如后面要动态修改值），需要把字符串用单引号括起来，告诉Vue这是字符串字面量：

  <inputField :label="'Hola'" :name="'nombre'" />
  

2. Props配置里的小矛盾 #

另外，你给props同时设置了required: true和default，这其实有点冲突——当required设为true时，Vue会强制要求父组件必须传递这个prop，此时default配置不会生效。如果你的业务逻辑确实要求这两个props是必填的，可以把default去掉，这样如果父组件没传值，Vue会在控制台抛出警告，更容易排查问题。优化后的props配置如下：

<script>
export default {
  props: {
    label: {
      type: String,
      required: true,
      // 移除default，因为required为true时它不会生效
    },
    name: {
      type: String,
      required: true,
      // 同样移除default
    },
  },
  data() {
    return {}
  },
}
</script>

3. 动态绑定变量的情况（可选） #

如果之后你需要把props绑定到父组件的动态变量上，记得先在父组件的data里定义这些变量：

<!-- 父组件代码 -->
<template>
  <inputField :label="inputLabel" :name="inputName" />
</template>

<script>
export default {
  data() {
    return {
      inputLabel: 'Hola',
      inputName: 'nombre'
    }
  }
}
</script>

这样修改后，你的组件就能正确接收到父组件传递的label和name值啦！

内容的提问来源于stack exchange，提问作者Toni Michel Caubet