전체 글592 1-11. slot slot이란?특정 부분만 html 요소를 재정의해서 사용할 수 있게끔 해주는 방식을 slot 이라고 한다. SlotView.vuetemplate> div> button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal" > Show Modal button> button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal2" > Show Modal button> slot-modal modalId="userModal"> temp.. 2024. 9. 13. 1-10. 재사용 컴포넌트, 심플 그리드 ListViewtemplate> div class="container"> button class="btn btn-primary me-1" @click="doSearch">조회button> button class="btn btn-danger" @click="doDelete">삭제button> 제품코드 제품명 제품가격 {{ drink.drinkId }} {{ drink.drinkName }} {{ drink.price }} --> simple-grid :headers="he.. 2024. 9. 13. 1-9. 재사용 컴포넌트, 부모<->자식 간 값 전달 template> h3>{{ title }}h3>template>script>export default { components: {}, props: { title: { type: String, default: '페이지 제목' } }, props에 정의되어 있는 데이터 변수들은 부모로부터 전달된 값들이다. 즉, props는 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용한다. ,custom event, emit, refs - 부모와 자식 컴포넌트간 값 전달을 위해 필요한 기능들 예제ParentView.vuetemplate> div> button @click="changeValue">변경button> child-com v-bind:str=".. 2024. 9. 12. 1-8. 라이프사이클 훅 template> div> div>{{ sampleData }}div> div> label for="">태어난 도시는?label> select name="" id=""> option value="" :key="city.code" v-for="city in cities"> {{ city.title }} option> select> div> div>template>script>export default { components: {}, data() { return { sampleData: '', cities: [], fnInterval: null } }, props: {}, s.. 2024. 9. 12. 이전 1 ··· 3 4 5 6 7 8 9 ··· 148 다음
