Question

代码：

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

Chrome开发者工具中的Vue2.1.10警告：The data property "article" is already declared as a prop. Use prop default value instead.

Answer 1

您已在article和data这两个地方添加了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;
...

Answer 4

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

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

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

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

数据属性“article”已被声明为prop。请改用prop默认值

4 个答案: