Vue.js向组件属性传布尔值遇语法解析错误求助

你的代码存在两处关键语法错误导致解析失败，以下是具体修正方案：

1. 修复InputText.vue的type绑定语法 #

你给:type绑定的表达式多了一层冗余大括号，Vue的属性绑定直接写入JS表达式即可，无需额外包裹对象语法：

<template>
  <!-- 移除表达式外层的大括号 -->
  <input :type="IsPassword ? 'password' : 'text'" value="No error now" />
</template>
<script>
export default {
  props: {
    IsPassword: Boolean
  }
}
</script>

2. 修复App.vue的结构问题 #

• import语句必须放在<script>标签内部，不能直接暴露在模板外
• 组件标签必须闭合（Vue单文件组件中推荐使用自闭合标签）

修正后的App.vue：

<template>
  Username : <InputText />
  Password : <InputText :isPassword="true" />
</template>

<script>
import InputText from "@/components/InputText.vue";

export default {
  components: {
    InputText
  }
}
</script>

额外编码规范建议 #

Vue的props命名推荐使用小驼峰格式（比如isPassword），模板中传递属性时可以用短横线分隔（:is-password="true"）或者保持小驼峰，这样更符合官方编码规范；你当前的大驼峰写法虽能正常运行，但风格上不够统一。

内容的提问来源于stack exchange，提问作者Danial Qsk