삐삐사전

data 에 변수 를 하나 넣어준다. ​ data() { return { activeTab : 'a' } }, ​ 해당 값은 컴포넌트에서 클릭시 변동이 되게 해두었다. ​ 예약목록 ​ 해당 컴포넌트 하단 스크립트 파일 쪽에 watch 를 생성해준다. ​ 그러면 클릭할 때 마다 새로운 값과 과거 값이 출력된다. ​ oldVal 은 안써도 된다.

매번 기억은 하는데 쓰려고 하면 잊어버린다. ​ ​ #부모컴포넌트 부모 컴포넌트에서는 이렇게 작성을 해준다. getCheckedCode 는 부모 컴포넌트의 함수이고 addCheckCode는 자식컴포넌트에서 올라오는 값이다. ​ ​ #자식컴포넌트 newlyCheckedBox(code){ this.$emit('addCheckCode', code) }, 자식 컴포넌트에서 부모컴포넌트에 써준 '이벤트명'을 넣어준다. 여기서는 $emit 을 사용해야 한다. 같이 전달해야 하는 값이 있어서 옆에 code 를 작성해주었다.

data 에 변수를 하나 넣어준다. data() { return { activeTab : 'a' } }, 해당 값은 아래처럼 컴포넌트에서 클릭시 변동이 되게 해두었다. 목록 해당 컴포넌트 하단 스크립트 파일 쪽에 watch 를 생성해준다. 그러면 클릭할 때 마다 새로운 값과 과거 값이 출력된다. ​ oldVal 은 변경되기 이전의 값이고 newVal은 새로운 값이다. watch : { activeTab(newVal){ console.log(newVal) } }, oldVal은 이런식으로 작성을 하지 않아도 된다.

매번 기억은 하는데 쓰려고 하면 잊어버린다. ​ 부모 컴포넌트 부모 컴포넌트에서는 이렇게 작성을 해준다. getCheckedCode 는 부모 컴포넌트의 함수이고 addCheckCode는 자식컴포넌트에서 올라오는 값이다. 자식 컴포넌트 newlyCheckedBox(code){ this.$emit('addCheckCode', code) }, 자식 컴포넌트에서 부모컴포넌트에 써준 '이벤트명'을 넣어준다. 여기서는 $emit 을 사용해야 한다. 같이 전달해야 하는 값이 있어서 옆에 code 를 작성해주었다.

상위 컴포넌트 sendType : 이게 키값이 되는거고 하위 컴포넌트에서 sendType를 통해 값을 전달 받는다 하위컴포넌트 export default { props : ['sendType'], data() { return{ } }, methods: { } }, mounted() { }, created() { console.log(this.$props.sendType) } }