728x90 반응형 전체 글303 Vue.js] 15. Component > Slots 컴포넌트의 props는 모든 유형의 JavaScript값을 받을 수 있다. 그렇다면, 템플릿 content는 어떨까? template fragment를 자식 component에 전달해서 자식 component가 fragment를 렌더링하길 원할 수 있다. 클릭하기! 클릭하기! 여러 엘리먼트를 전달할 수도 있다. 클릭하기! 대체 컨텐츠 제출 제출Named Slots 다음과 같이 단축 문법을 사용할 수 있다. 다음은 페이지 제목일 수 있습니다. 주요 내용에 대한 단락입니다. 그리고 또 하나. 다음은 연락처 정보입니다. Conditional Slots 2024. 12. 31. Vue.js] 14. Component > v-model, Fallthrough 속성 v-model을 컴포넌트에서 사용하여 양방향 바인딩을 구현할 수 있다. 컴포넌트에 사용하면 다음과 같이 확장된다. searchText = newValue"/>이 기능이 작동하려면 CustomInput 컴포넌트에 두 가지 작업을 해야한다. 1) 네이티브 앨리먼트의 value 속성을 modelValue 프로퍼티에 바인딩합니다.2) 네이티브 input 이벤트가 트리거되면 새 값으로 update:modelValue 사용자 지정 이벤트를 내보냅니다. 또 다른 방법은 computed 프로퍼티를 사용하는 것이다. v-model argumentsv-model은 컴포넌트에서 인수를 받을 수도 있다. Multiple v-model bindings v-model modifiers 속성 상속fallthrough .. 2024. 12. 31. Vue.js] 13. Component > Events 컴포넌트는 내장 $emit 메소드를 사용해서 사용자 정의 이벤트를 발생시킬 수 있다. click meexport default { methods: { submit() { this.$emit('someEvent') } }} 부모는 v-on을 사용해서 수신할 수 있다. 템플릿에서는 kebab-case 이벤트 리스너를 사용하는 것이 좋다. native DOM 이벤트와 달리, 컴포넌트에서 발생한 이벤트는 버블리되지 않는다. direct 자식 컴포넌트에서 발생한 이벤트만 수신할 수 있다. Event Arguments Increase by 1 count += n" />methods: { increaseCount(n) { this.count += n }} Declaring Emit.. 2024. 12. 31. Vue.js] 12. Component > 등록, Props 1. 전역등록.component() 메서드를 사용해서 Vue앱에서 컴포넌트를 전역으로 사용할 수 있도록 할 수 있다. import { createApp } from 'vue'const app = createApp({})app.component( // 등록될 이름 'MyComponent', // 구현체 { /* ... */ })또는 가져온 .vue 파일을 등록한다. import MyComponent from './App.vue'app.component('MyComponent', MyComponent)전역으로 등록된 컴포넌트는 앱 내의 모든 컴포넌트 템플릿에서 사용할 수 있다. 2. 로컬등록전역 등록에는 몇 가지 단점이 있다. 1) 전역등록은 빌드 시스템이 사용하지 않는 컴포넌트를 제거하는 .. 2024. 12. 31. Vue.js] 11. ref, component 개발자가 직접 DOM element에 접근해야 하는 경우 ref라는 속성을 사용할 수 있다. component가 mount된 이후에 ref에 접근가능하다. {{ item }} ref 배열은 소스 배열과 동일한 순서를 보장하지 않습니다. 컴포넌트 정의하기 당신은 {{ count }} 번 클릭했습니다.컴포넌트 사용하기자식 컴포넌트를 사용하려면 부모 컴포넌트에서 가져와야(import) 합니다. 파일 안에 ButtonCounter.vue라는 카운터 컴포넌트를 배치했다고 가정하면, 해당 컴포넌트 파일의 기본 내보내기가 노출됩니다: 아래에 자식 컴포넌트가 있습니다. 컴포넌트를 전역으로 등록하면, 가져오기(import) 없이 지정된 앱의 모든 곳에서 컴포넌트를 사용할 수 있습니.. 2024. 12. 27. Vue.js] 10. 생명 주기 훅, Watchers 각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어, 데이터 감시를 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 합니다. 그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행하여, 특정 단계에서 개발자가 의도하는 로직이 실행될 수 있도록 합니다. 생명 주기 훅 등록하기예를 들어 mounted 훅은 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있습니다:export default { mounted() { console.log(`컴포넌트가 마운트 됐습니다.`) }}모든 생명 주기 훅은 호출하는 현재 활성 인스턴스를 가리키는 this 컨텍스트로.. 2024. 12. 27. 이전 1 2 3 4 5 6 ··· 51 다음 728x90 반응형