본문 바로가기

전체 글743

같은 레벨의 컴포넌트 간 통신 1. 먼저 이벤트 버스로 활용할 새 인스턴스를 1개 생성하고, eventBus라는 변수에 참조한다. 이렇게 하면 eventBus라는 변수로 새 인스턴스의 속성과 메서드에 접근할 수 있다. 2. 하위 컴포넌트에는 template 속성과 methods 속성을 정의한다. template 속성에는 '하위 컴포넌트 영역입니다'라는 텍스트와 show 버튼을 추가한다. methods 속성에는 showLog() 메서드를 정의하고 메서드 안에는 eventBus.$emit()을 선언하여 triggerEventBus라는 이벤트를 발생하는 로직을 추가한다. 이 이벤트는 발생할 때 수신하는 쪽에 인자 값으로 100이라는 숫자를 함께 전달한다. 3. 상위 컴포넌트의 created 라이프 사이클 훅에 eventBus.$on()으로.. 2022. 6. 6.

하위에서 상위 컴포넌트로 이벤트 전달하기 : $emit 이벤트를 발생시켜 상위 컴포넌트에 신호를 보내면 된다. 상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출한다. 이벤트 발생과 수신은 $emit()과 v-on: 속성을 사용하여 구현한다. // 이벤트 발생 this.$emit('이벤트명') $emit을 호출하면 괄호 안에 정의된 이벤트가 발생한다. 일반적으로 $emit()을 호출하는 위치는 하위 컴포넌트의 특정 메서드 내부이다. 따라서 $emit()을 호출할 때 사용하는 this는 하위 컴포넌트를 가리킨다. // 이벤트 수신 호출한 이벤트는 하위 컴포넌트를 등록하는 태그에서 v-on: 으로 받는다. 하위 컴포넌트에서 발생.. 2022. 6. 5.

상위에서 하위 컴포넌트로 데이터 전달하기 : props props란? 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성 2022. 6. 5.

컴포넌트 간 통신과 유효 범위 Vue의 경우 컴포넌트로 화면을 구성하기때문에 같은 웹 페이지라도 데이터를 공유할 수 없다. 2022. 6. 5.

인스턴스 유효 범위와 지역 컴포넌트, 전역 컴포넌트 간 관계 첫 번째 인스턴스 영역 두 번째 인스턴스 영역 두 번째 인스턴스 영역에는 '지역 컴포넌트입니다.' 라는 문구가 뜨지 않았다. 왜냐하면 지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록을 해 줘야 하기 때문이다. 2022. 6. 5.

Component -전역 컴포넌트 컴포넌트 등록 // 전역 컴포넌트 표시 -지역 컴포넌트 컴포넌트 등록 즉, 컴포넌트 등록 = 컴포넌트 등록 지역 컴포넌트가 등록되었습니다! 둘이 같습니다. 2022. 6. 5.

이전 1 2 3 4 5 6 7 8 ··· 124 다음

티스토리툴바