728x90 반응형 Vue.js12 props & emit props 자식 컴포넌트에서 부모 데이터값을 사용해야 할 때 사용 배열 방식으로 여러개를 받을 수도 있다. 단, props로 받은 데이터 값은 변경할 수 없다. 부모 컴포넌트에서 자식 컴포넌트로 데이터 넘겨주기 예) // :자식에서 사용할 변수명(:info) = 부모에서 사용할 변수명(info) import { ref } from 'vue'; import Sun from './components/props/Sun.vue';// 자식 컴포넌트 import // 자식에서 사용할 변수 생성 const info = ref({ 'name' : '전재준', 'age' : 20 }); emit / emits 자식 컴포넌트에서 부모 function을 사용해야 할 때 2023. 9. 7. Vue 컴포넌트 재활용하기 & Prop 컴포넌트 안에 다른 컴포넌트 사용하기 사용할 컴포넌트를 import 한 후 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 components에 등록하면 된다. //Html에서는 import한 컴포넌트 이름을 이용해서 태그를 만들면 된다. 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기 - Props 자식 컴포넌트 {{ title }} 부모 컴포넌트 정적/동적 Prop 전달 v-bind나 약어인 :를 사용해 prop에 동적인 값을 전달 가능 data() { return { title: '동적 타이틀; }; } 숫자형 전달 숫자형을 prop로 전달하기 위해서는 v-bind로만 가능. v-bind 안쓰면 문자로 전달됨 논리 자료형(Boolean)전달 v-bind를 사용해야 한다. v-bind를 사용하지 않으면.. 2023. 7. 31. Vue 이벤트 처리 방법(v-on) Vue 컴포넌트에서 이벤트 처리를 할 때는 v-on 디렉티브를 사용한다. v-on 디렉티브는 심볼 @로 대체 가능하다. 클릭 이벤트(v-on:click) v-on:click="메소드명" 혹은 @click="메소드명" Add 1 count : {{ counter }} 클릭 이벤트를 통해 지정된 함수로 파라미터를 전달하고 싶다면, 다음과 같이 설정 Set 10 set : {{ number }} 클릭 이벤트 발생 시 여러 개의 함수를 호출하고 싶다면, Click Change 이벤트 @change="메소드명" 서울 부산 제주 Key 이벤트 엔터키가 입력되는지 감시하다가 엔터를 치면 조회 버튼이 눌리게 한다거나.. 이런것! 주로 사용하는 key 이벤트 .enter .up .tab .down .delete .lef.. 2023. 7. 30. Vue 랜더링 문법(v-if, v-show) v-if 와 v-show 의 차이점 화면 내에서 자주 toggle이 일어난다면 v-show를 사용하는 것이 자원이 절약되고, 그렇지 않은 경우는 v-if 가 자원을 절약한다. 구분 v-if v-show 랜더링 방식 조건을 만족하는 순간에 html 블록이 생성되고, 조건에 만족하지 않으면 html 블록은 삭제된다. 즉, 조건에 맞는 경우만 랜더링 => 해당 블록에 toggle이 일어날 때 자원을 많이 사용(블록 전체를 생성했다가, 삭제) 조건 만족 여부와 상관없이 무조건 html 블록이 생성된다. 조건을 만족하면 css display를 이용해 화면에 보이는 것. 즉, 조건에 맞지 않아도 무조건 랜더링 => 처음에 자원을 많이 사용 v-if A B C v-show bShow가 true면 보입니다. 2023. 7. 30. Vue 리스트 랜더링(v-for) 배열 데이터는 v-for 디렉티브를 이용해서 바인딩 할 수 있다. 형식은, v-for="(item, index) in items" 제품명 가격 배송료 {{ product.pname }} {{ product.price }} {{ product.delivery_price }} 2023. 7. 30. 이전 1 2 3 다음 728x90 반응형
