使用Vue的props进行组件传递校验时出现 Extraneous non-props attributes的解决方案

作者:CSDN-PleaSure乐事

欢迎大家阅读我的博客 希望大家喜欢

使用环境:WebStorm

目录

出现错误的情况

报错:

代码:

报错截图

原因分析

解决方案

方法一

方法二


出现错误的情况

以下是我遇到该错误时遇到的报错和代码:

报错:

Debug\] \[vite\] connecting... (client, line 495) \[Debug\] \[vite\] connected. (client, line 614) \[Warning\] \[Vue warn\]: Extraneous non-props attributes (title) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes. (9) (vue.js, line 2116) " " " at \" " " " at \" " " " at \" \[Warning\] \[Vue warn\]: Extraneous non-props attributes (title) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes. (9) (vue.js, line 2116) " " " at \" " " " at \" " " " at \"的错误

代码:

App.vue

javascript 复制代码
<template>
  <componentA />
</template>
<script>
import componentA from "@/components/componentA.vue";
  export default {
    data() {
      return {

      }
    },
    components:{
      componentA
    }
  }
</script>

componentA.vue

javascript 复制代码
<template>
  <h3>{{ componentName }}</h3>
  <ComponentB :title="titleOne" />
  <ComponentB :title="titleTwo" />
</template>

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

export default {
  data() {
    return {
      componentName: 'this is componentA',
      titleOne: 30,
      titleTwo: "Hello World"
    };
  },
  components: {
    ComponentB
  }
};
</script>

componentB.vue

javascript 复制代码
<template>
  <h3>{{componentName}}</h3>
  <p>{{titleOne}}</p>
  <p>{{titleTwo}}</p>
</template>
<script>
export default {
  data(){
    return {
      componentName: 'this is componentB'
    }
  },
  props:{
    titleOne:{
      type:[String,Array,Number]
    },
    titleTwo:{
      type:String
    }
  }
}
</script>

报错截图

原因分析

问题的主要原因在于 componentB.vue 中定义的 props (titleOne, titleTwo) 与 componentA.vue 中传递的属性 (title) 不匹配。具体来说:

在 componentA.vue 中,您通过 :title="titleOne" 和 :title="titleTwo" 向 ComponentB 传递了 title 属性。

然而,在 componentB.vue 中,您定义的是 titleOne 和 titleTwo 作为 props,而不是 title。

因此,当 componentA.vue 尝试将 title 属性传递给 ComponentB 时,ComponentB 并没有定义接收这个属性的 prop,导致 Vue 抛出警告,表示这些非 prop 属性无法自动继承。

解决方案

方法一

要解决这个问题,需要确保 componentA.vue 传递的属性名称与 componentB.vue 定义的 props 名称相匹配。以下是两种解决方案。

如果希望保留 componentB.vue 的当前 props 结构(即 titleOnetitleTwo),那么需要相应地调整 componentA.vue,以传递正确的属性名,即修改componentA.vue中template的结构

javascript 复制代码
<template>
  <h3>{{ componentName }}</h3>
  //把原来的title分别变成了title-one和title-two
  <ComponentB :title-one="titleOne" />
  <ComponentB :title-two="titleTwo" />
</template>
//下面的内容不变
<script>
import ComponentB from "@/components/componentB.vue"; // 使用 PascalCase

export default {
  data() {
    return {
      componentName: 'this is componentA',
      titleOne: 30,
      titleTwo: "Hello World"
    };
  },
  components: {
    ComponentB
  }
};
</script>

需要注意的是,当在模板中使用 kebab-case(如 :title-one)时,Vue 会自动将其转换为 camelCase(如 titleOne)来匹配 JavaScript 中的对象键名。

方法二

可以只定义一个 title的prop,并且在 componentA.vue 中两次传递 title 属性,即修改compnentB.vue的内容,删去titleOne和titleB当中的一个,保留另一个并改为title即可

javascript 复制代码
<template>
  <h3>{{componentName}}</h3>
  <p>{{title}}</p>
</template>
<script>
export default {
  data(){
    return {
      componentName: 'this is componentB'
    }
  },
  props:{
    title:{
      type:[String,Array,Number]
    }
  }
}
</script>

这样问题就解决了,希望对大家有帮助。

作者:CSDN-PleaSure乐事

希望我的博客对您有帮助,也希望在对您有帮助时您可以为我留下点赞收藏与关注,这对我真的很重要,谢谢!

相关推荐
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj1689978 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
我在北京coding12 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景13 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘13 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)14 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中14 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi14 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X15 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come1123416 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js