본문 바로가기

vue emit

(2)
[ Vue ] emit 한줄로 사용하기 - @click.self v-on:click.self 내부의 자식 요소들이 존재하는 경우 클릭된 요소가 해당 엘리먼트와 일치하는 경우에만 이벤트에 바인딩된 함수를 호출 이벤트 버블링 등의 간접적인 클릭 요소가 발생하여 함수 호출이 한 번이 아닌 다수가 일어나는 문제를 방지할 수 있다. 주의할 점은 클릭 영역에 자식 영역이 포함된 경우 당연히 함수가 동작하지 않는다 상위컴포넌트 아래의 에서 상위컴포넌트의 내용은 아래로 둘다 동일하다 (이벤트를 받는 상위 컴포넌트) 하위컴포넌트 before 하위 컴포넌트에서 상위컴포넌트로 간단한 이벤트를 전달할때 기존에 작성했던 코드는 아래와 같다. 취소 간단한 기능인데 저렇게 밖에 할 줄 몰라서 methods에 emit으로 이벤트를 올려 보내는 코드를 따로 작성해두었다 하위컴포넌트 after 하위..
[ Vue ] 컴포넌트간 데이터 전달 , PROPS와 EMIT 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법 - 분리된 상태의 부모, 자식 컴포넌트 간 긴밀히 소통해야 할 때가 있는데, 이때 필요한 것이 컴포넌트 통신. 즉 props와 emit이다. props 부모에서 자식으로 데이터를 전달하기 위해 사용 프롭스 속성은 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 통신 // 하위 컴포넌트의 내용 var childComponent = { props: ['프롭스 속성 명'] } ** props 받을때 배열으로 넣는거 잊지말기 ** :: 사용예시 :: 결과 emit emit은 자식이 부모에게 데이터를 전달하기 위해서 이벤트를 발생시키는 것 // 하위 컴포넌트의 내용 this.$emit('이벤트 명'); :: 사용예시 :: 결과 ✓ 참고 joshua19..