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

news2024/12/26 16:23:54

作者：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 <ComponentB" "title=30" ">" " " " at <ComponentA" ">" " " " at <App>" [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 <ComponentB" "title=\"Hello World\"" ">" " " " at <ComponentA" ">" " " " at <App>"的错误

代码：

App.vue

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

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

componentA.vue

<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

<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 结构（即 titleOne 和 titleTwo），那么需要相应地调整 componentA.vue，以传递正确的属性名，即修改componentA.vue中template的结构

<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即可

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