【Element】The data property "loading" is already declared as a prop. Use prop default value instead.

 报错信息

The data property "loading" is already declared as a prop. Use prop default value instead.

default{data}中的“loading”属性已经在 default{props} 中定义。默认使用  default{props}中的属性值替代。

vue.runtime.esm.js:619 [Vue warn]: The data property "loading" is already declared as a prop. Use prop default value instead.

found in

---> <TabPane>
       <ElTabPane> at packages/tabs/src/tab-pane.vue
         <ElTabs> at packages/tabs/src/tabs.vue
           <Tab> at src/views/tab/hejiinfo/hejidata/index.vue
             <Index> at src/views/tab/hejiinfo/index.vue
               <AppMain> at src/layout/components/AppMain.vue
                 <Layout> at src/layout/index.vue
                   <App> at src/App.vue
                     <Root>

 

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "loading"

因为父组件每次重新渲染时，该值都会被修改，为了避免直接更改“props”中的属性值，根据 Props 属性值而是使用 data 或者 computed 基于属性来替代。 Prop 的“loading”属性被篡改

vue.runtime.esm.js:619 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "loading"

found in

---> <TabPane>
       <ElTabPane> at packages/tabs/src/tab-pane.vue
         <ElTabs> at packages/tabs/src/tabs.vue
           <Tab> at src/views/tab/hejiinfo/hejidata/index.vue
             <Index> at src/views/tab/hejiinfo/index.vue
               <AppMain> at src/layout/components/AppMain.vue
                 <Layout> at src/layout/index.vue
                   <App> at src/App.vue
                     <Root>

 

源码

<template>
  <section>
    <el-table v-loading="loading" :data="list" border fit highlight-current-row style="width: 100%">
    <!--...-->
    </el-table>
    <el-pagination>
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
       <!--...-->
    </el-pagination>
  </section>
</template>

<script>
  //...
  export default {
    props: {
      //...
      loading:{
        type: Boolean,
        default: false
      },

    },
    data() {
      return {
        list: null,
        //...
        loading: false,
        //...
      }
    },
    methods: {
      getList() {
         //...
          this.loading=true
         //...
      },
      //...
      handleSizeChange(val) {
        //...
        this.getList()
      },
      handleCurrentChange(val) {
        //...
        this.getList()
      },    
      //...
    }
  }
</script>

解决方案

1、The data property "loading" is already declared as a prop. Use prop default value instead.

default{data} 与 data{props}中的loading属性只保留一个。

<script>
  //...
  export default {
    props: {
      //...
      loading:{
        type: Boolean,
        default: false
      },

    },
    data() {
      return {
        list: null,
        //...
        //loading: false,
        //...
      }
    },
  }
</script>

2、Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "loading"

如果父组件重新渲染会修改该值，则该值最好存放在data属性中 default{data} 。

<script>
  //...
  export default {
    props: {
      //...
      //loading:{
      //  type: Boolean,
      //  default: false
      //},

    },
    data() {
      return {
        list: null,
        //...
        loading: false,
        //...
      }
    },
  }
</script>