상위 구성 요소에서 하위 속성 변경 내용을 보는 방법

상위 구성 요소에서 하위 속성 변경 내용을 보는 방법

달력 보기 구성 요소 라이브러리를 사용 중인데 해당 구성 요소의 속성이 언제 변경되는지 보고 싶습니다.

나는 이것을 시도해 보았다.

  watch: {
    '$refs.picker.popupVisible': {
      handler (new_value) {
        console.log('executed')
      },
      deep: true
    }
  }

또, 다음과 같습니다.

  computed: {
    picker () {
      console.log(this.$refs.picker.popupVisible)
      return this.$refs.picker.popupVisible
    }
  }

이 방법은 올바른 방법이 아니기 때문에 vue.js 해킹이 해결책이 될 수 있다는 것을 알고 있습니다.만약 내가 아이 컴포넌트에 접근할 수 있다면, 나는 부모에게 이벤트를 방출할 것이다.그러나 불행히도 나는 그럴 수 없다.

도서관 이용에도 몇 가지 제한이 있었지만 비슷한 문제가 있었습니다.

유감스럽게도 워처가 작동하지 않습니다.기능 감시기를 사용하여 작동해야 합니다.그리고 실내에서 사용해야 합니다.mounted갈고리를 채우다

  mounted() {
    this.$watch(
      "$refs.picker.popupVisible",
      (new_value, old_value) => {
         //execute your code here
      }
    );
  }

저도 한 가지 예가 있습니다.여기를 봐주세요

부모 컴포넌트에 데이터 오브젝트를 생성하여 해당 데이터 오브젝트에 날짜 필드를 포함시키고 해당 데이터 오브젝트를 자녀 컴포넌트에 소품으로 전달합니다.

<child :dateObj="dateObj"></child>
data: {
  dateObj: {
    date: ""
  }
}

자 컴포넌트에서는date그 분야dateObj소품입니다. Vue가 소품으로 전달되는 오브젝트의 속성을 감시하지 않기 때문에 가능합니다.또한 Vue가 콘솔에서 불평하지 않고 수정할 수 있습니다.

따라서 변경된 날짜 필드는 부모 필드에도 반영됩니다.

언급URL : https://stackoverflow.com/questions/51225378/how-to-watch-child-properties-changes-from-parent-component