데이터 속성 "article"이 이미 소품으로 선언되었습니다.대신 프롭 기본값 사용

데이터 속성 "article"이 이미 소품으로 선언되었습니다.대신 프롭 기본값 사용

코드:

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

Chrome 개발자 도구의 Vue2.1.10 경고:데이터 속성 "article"이 이미 소품으로 선언되었습니다. 대신 prop 기본값을 사용합니다.

추가했습니다.article양쪽에서data그리고.props이것들 중 하나여야 합니다.그래서 에러가 발생하고 있습니다.부모 컴포넌트로부터 건네주는 경우는, 그 장소 중 하나를 떼어내, 소품으로 보관해 둘 필요가 있습니다.로컬 인스턴스 데이터인 경우 vue에 보관합니다.data차단합니다.

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

선언하면article소품에서는 사이드 데이터로 반환할 필요가 없습니다.이하를 참조해 주세요.

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

  data () {}, 

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

TypeScript를 사용하는 경우 프로포트에 값을 할당했을 수 있습니다.

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

이것으로 변경하다

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

여기서 문제는 속성과 데이터 간의 충돌입니다.둘 중 하나만 가질 수 있습니다.둘 다 가질 수 없습니다.

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

여기에서 속성 문서를 템플릿의 데이터인 것처럼 사용할 수 있습니다.예:

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

언급URL : https://stackoverflow.com/questions/42087441/the-data-property-article-is-already-declared-as-a-prop-use-prop-default-valu