数据属性"article"已被声明为prop.请改用prop默认值

Question

码:

export default {
    props: {
        article: {type: Object}
    },
    data () {
        return {article: this.article}
    }, 
    methods: {
        itemClick () {
            console.log('itemClick');
        }
    }
};

Chrome开发人员工具中的Vue2.1.10警告:数据属性"article"已声明为prop.请改用prop默认值.

Answer 1

您已经添加article在两个地方data和props.它应该是其中之一,这就是为什么你得到错误.如果从父组件传递它,则必须将其删除,而不是将其作为props保留,如果这是本地实例数据,则将其保留在vue data块中.

export default {
  props: {
    article: {
      type: Object
    }
  },
  data() {
    return {
      article: this.article
    }
  },
  methods: {
    itemClick() {
      console.log('itemClick');
    }
  }
};

Answer 2

一旦你article在道具中声明,你就不需要在边数据中返回它.见下文.

export default {
  props: {
    article: {type: Object}
  },

  data () {}, 

  methods: {
    itemClick () {
      console.log('itemClick');
    }
  }
};

Answer 3

如果您使用的是 TypeScript，那么您可能已经为 prop 分配了一个值。

@Component
export default class HelloWorld extends Vue {
  @Prop({ type: Array }) users = []; // wrong, do not assign to a prop
}

改成这样

...
@Prop({ type: Array }) users;
...