使用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乐事

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

相关推荐
paopaokaka_luck1 小时前
婚纱摄影管理系统(发送邮箱、腾讯地图API、物流API、webSocket实时聊天、协同过滤算法、Echarts图形化分析)
vue.js·spring boot·后端·websocket·算法·echarts
若梦plus3 小时前
Nuxt.js基础与进阶
前端·vue.js
若梦plus4 小时前
Vue服务端渲染
前端·vue.js
Mr...Gan4 小时前
VUE3(四)、组件通信
前端·javascript·vue.js
给力学长5 小时前
自习室预约小程序的设计与实现
java·数据库·vue.js·elementui·小程序·uni-app·node.js
楚轩努力变强6 小时前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
前端开发爱好者7 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
接口写好了吗7 小时前
【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据
javascript·vue.js·elementui·可视窗口滚动
洛千陨11 小时前
Web Worker基础概念 & 图片滤镜处理实际应用 -- Vue3
javascript·vue.js
半花11 小时前
【vue】v-自定义指令
前端·vue.js