Vue 구덩이 밟 기 안내

목차

+단 방향 데이터 흐름

+ table should have a unique `key` or `rowKey`

+리 셋 구성 요소 선택 옵션

+옵션 이름 대신 구성 요소 표시 값 선택

+vue 에서 setInterval()방법 사용

+Vue 신문"this is undefined"

+단 방향 데이터 흐름

오류 알림

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 는 부자 prop 사이 에 단 방향 하 행 바 인 딩 을 형성 합 니 다.부모 prop 의 업 데 이 트 는 하위 구성 요소 로 아래로 이동 하지만 반대로 는 안 됩 니 다.이렇게 하면 하위 구성 요소 에서 부모 구성 요소 의 상 태 를 의외로 바 꾸 는 것 을 방지 하여 응용 데이터 흐름 을 이해 하기 어렵 게 할 것 입 니 다.추가 적 으로 부모 급 구성 요소 가 업 데 이 트 될 때마다 하위 구성 요소 의 모든 prop 는 최신 값 으로 갱 신 됩 니 다.이것 은 하위 구성 요소 내부 에서 prop 를 바 꾸 지 말 아야 한 다 는 것 을 의미한다.만약 당신 이 이렇게 한다 면,Vue 는 브 라 우 저의 콘 솔 에서 경 고 를 보 낼 것 입 니 다.

피 갱 안내

prop 전달 파 라 메 터 를 사용 하지 않 고 부모 구성 요소 로 하위 구성 요 소 를 직접 호출 하 는 방법

 	showModal() {
     
      this.$refs.anchorEditor.show();
    }

공식 설명

+ table should have a unique key or rowKey
antdesign vue 에서 표 컨트롤 을 사용 하 는 중 오류 가 발생 했 습 니 다:
antdv: Each record in table should have a unique key prop,or set rowKey to an unique primary key。

	 :rowKey="record => record.id"

+리 셋 구성 요소 선택 옵션
팝 업 구성 요 소 는 하나의 Select 구성 요소 만 포함 되 어 있 습 니 다.기본적으로 다시 열 때 마지막 으로 선택 한 옵션 이 표 시 됩 니 다.지금 은 열 때마다 초기 상 태 를 회복 해 야 합 니 다.다음 과 같이 변경 합 니 다.

select 에서 value 와 데이터 항목 selected Id 를 연결 합 니 다

<a-select
      :placeholder="placeholder"
      :value="selectedId"
      ...
         :value="-1" :key="-1">
           
      a-select-option>

데이터 항목 selected Id 의 초기 값 을-1

로 설정 합 니 다.

<script>
	export default {
     
	  data() {
     
	    return {
     
	      selectedId: -1,
	      ...

외부 방법 에서 selected Id 를-1 로 리 셋 하고 구성 요소 리 셋 을 첫 번 째 항목 으로 리 셋 합 니 다("선택 하 십시오")

  methods: {
     
 	update() {
     
      this.selectedId = -1;
      ...

+옵션 이름 대신 구성 요소 표시 값 선택
select 의 value 는 string 형식 이지 만 시스템 설정 id 는 number 형식 으로 대응 되 지 않 기 때문에 value 의 option 을 선택 하려 면 toString()을 사용 하여 id 를 문자열 로 변환 해 야 합 니 다.
+vue 에서 setInterval()방법 사용 하기
mounted()함수 에 setInterval()사용 하기

  mounted() {
     
    this.initMap();
    setInterval(this.addRandomFeature, 1000);
    source.on("addfeature", function(e){
     
      console.log(e);
    });
  }

+Vue 신문"이것 은 정의 되 지 않 았 습 니 다"
정 의 된 일부 반전 함수 에서 this 를 사용 할 때 이 오 류 를 보고 합 니 다.

  methods:{
     
	reset() {
     
      vectorSource.forEachFeature(
        function(f) {
     
          this.translate(f);
        }.bind(this)
      );
    },
    translate(f) {
     ...}
    ...
 }

잘못된 이유:
일반 함수 의 this 는 동적 역할 영역 에 의 해 결정 되 며,항상 직접 호출 자 를 가리 키 고 있 습 니 다.
this 의 지향 은 구체 적 으로 다음 과 같은 네 가지 상황 으로 나 눌 수 있다.

this 는 항상 그것 을 가리 키 는 ,예 를 들 어 obj.func(),그러면 func()의 this 는 obj 를 가리킨다.

기본 상황(비 엄격 모드,'use strict'를 사용 하지 않 음)에서 함수 가 직접 호출 자가 없 으 면 this 는window

엄격 한 모드 에서 함수 가 직접 조절 자가 없 으 면 this 는undefined

call,apply,bid 바 인 딩 을 사용 합 니 다.this 는

을 말 합 니 다.
수정 할 수 있 는 두 가지 방법 이 있다.

화살표 함수

화살표 함 수 는 자신의 this 가 없고 내부 에서 사용 하 는 this 는 정 의 된 숙주 대상 에 의 해 결 정 됩 니 다.

	reset() {
     
      vectorSource.forEachFeature( f => {
     
        this.translate(f);
      });
    }

bind

call,apply,bid 로 연 결 된,this 는

	reset() {
     
      vectorSource.forEachFeature(
        function(f) {
     
          this.translate(f);
        }.bind(this)
      );
    },