vue组件，prop声明并传递，但是console说prop丢失

Posted 2023-02-23

【中文标题】vue组件，prop声明并传递，但是console说prop丢失

【英文标题】：Vue component, prop is declared and passed, but console says prop is missing

【发布时间】：2021-08-29 20:17:32

【问题描述】：

我正在使用 vue + laravel 创建可重用的表单输入。

我有一个需要的道具，我通过它并按预期呈现，但控制台仍然记录错误：

“Vue 警告]：缺少必需的道具：“inputId”。

检查 vue 元素会显示定义的 prop。为什么在传递数据时会产生错误？

文本输入组件

<template>
    <input type="text" :name="inputId" :id="cssid" :placeholder="placeholder" :value="value">
</template>

<script>
    export default 
        props: 
          inputId: 
            type: String,
            required: true,
          ,
          isRequired: 
            type: Boolean,
            default: false,
          ,
          placeholder: 
            type: String,
          ,
          value: 
            type: String,
            default: '',
          ,
        ,

        mounted() 
            console.log('text mounted.')
        ,

        computed: 
          cssid() 
            return this.inputId + '_selection';
          ,
        ,
    
</script>

刀片视图片段，其中组件被调用（我试过用引号而不是引号，没有区别）

<text-input
  input-id="title"
></text-input>

Resultant html结果是正确的，但是为什么会出错？

<input type="text" name="title" id="title_selection">

【问题讨论】：

这能回答你的问题吗？ :) Missing required prop

【参考方案1】：

在这种情况下，我有两个组件实例，但我没有意识到旧的实例在那里。较旧的没有声明道具并给出错误，但在控制台中我已经加载了两次并不明显。删除组件的旧实例修复了错误。