[Nuxt.js] 객체형 props를 인도할 때 주의하십시오

이런 일이 생겼어요.

버튼의 클릭 방법으로 GTM 이벤트에 불을 붙이는 것은 흔히 있는 일이다.
이번에 버튼을 구성 요소로 구현한 다음에push의 대상형 데이터를proops로 GTM의 데이터레이터에 전달하면 조금 빠져있는 것을 공유할 수 있습니다.

이벤트

어?props의 기본값은 당신이 생각하는 대로 되지 않습니까?
위에서 말한 바와 같이 나는 GTM에 데이터를 건네주고 단추를 눌렀을 때 이벤트를 건너뛸 수 있는지 테스트했다.
코드는 일부 발췌문입니다. 단추 구성 요소의 props와 클릭 방법은 다음과 같습니다.

props: {
    gtmEventData: {
      type: Object,
      default: () => {},
    },
  },
methods: {
    clickMethod(url) {
      // gtmEventDataは空ならGTMイベントを発火しない
      if (Object.keys(this.gtmEventData).length !== 0) {
        this.$gtm.push(this.gtmEventData);
      }
      window.location.href = url;
    },
  },

클릭 방법의 처리는 매우 간단하다. 먼저ltm 이벤트데이터는 비어 있다(즉, 부모에게서 교부하지 않고 기본값이 결단된 경우) GTM 이벤트에 불을 붙이지 않고 값이 있으면 화를 내고 그렇게 페이지를 옮기는 처리이다.
하지만 실제로 부모님께ltm Evente Data를 주지 않으면 위의 코드는ltm Evente Data와undefined로 바뀐다.

실제 값

예상 값(기본값이 정상적으로 할당된 후)

props에서default를 지정했지만 기본값을 설정하지 않은 이유는 무엇입니까?

까닭

여기까지 읽은 너는 아마 이미 알아차렸을 것이다.안타깝게도 당시 자신은 자신이 뭘 잘못했는지 깨닫지 못하고 투덜거리다가 갑자기 깨달았다.
대상형proops의default값을 쓰는 방법은 원래 잘못된 것입니다.

props: {
    gtmEventData: {
      type: Object,
      default: () => {}, // <= ここが間違ってます
    },
  },

나는 위의default값이 {}인 줄 알았는데, 사실 이것은 함수 형식의default의 쓰기다...
정확히 아래와 같다

props: {
    gtmEventData: {
      type: Object,
      default: () => ({}), // <= 空のObjectを返す関数を指定する
    },
  },

대상이 함수가 되돌아오는 대상이 아니라면 대상은 복제되지 않고 직접 인용된다.
여기 상세히 쓰여 있다
영어이기 때문에 읽기가 귀찮다면 너무 많이 생각하지 마세요. 어쨌든 대상형의 기본값을 쓸 때 함수로 돌려줘야 해요.그나저나 Aray의 작법도 마찬가지다.

최후

아로 함수의 작법은 너무 습관이 되어서 나도 모르게 잘못 썼다.그래서 좀 좁아졌어요.
여러분도 프롬프트를 지정할 때 주의하세요.
그럼 끝까지 읽어주셔서 감사합니다.
안녕히 계세요.