数据属性"article"已声明为 prop。改用道具默认值

Question

代码：

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

Chrome 开发者工具中的 Vue2.1.10 警告：数据属性 "article" 已经声明为 prop。请改用道具默认值。

Answer 1

您在data和props两个地方都添加了article。它应该是其中之一，这就是您收到错误的原因。你必须把它从一个地方删除，如果你从父组件传递它，那么把它保留为道具。如果这是一个本地实例数据，请将其保存在 vue data 块中。

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

Answer 2

一旦你在 props 中声明了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;
...

Answer 4

这里的问题是属性和数据之间的冲突。您只能有一个或另一个，不能同时拥有两个：

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

从那里，您可以像使用模板中的数据一样使用属性文章。例如：

template: "<div>{{ article.type.something }}</div>"