Vue는 사용자 인터페이스를 구축하는 데 사용할 수 있는 JavaScript 프레임워크입니다. Vue의 핵심에는 UI를 독립적이고 재사용 가능한 부분으로 나눌 수 있는 구성 요소 시스템이 있습니다. 이 글에서는 Vue 문서의 컴포넌트 참조 및 액세스 방법을 소개합니다.
Vue 구성 요소는 자체 템플릿, JavaScript 로직 및 스타일이 있는 재사용 가능한 코드 블록입니다. Vue 구성 요소는 속성과 이벤트를 허용하고 수명 주기 후크와 같은 옵션을 제공할 수 있습니다.
Vue에서는 컴포넌트를 생성하는 방법이 글로벌 등록과 로컬 등록 두 가지가 있습니다. 전역 등록을 사용하면 애플리케이션 전체에서 구성 요소를 사용할 수 있는 반면, 로컬 등록을 사용하면 상위 구성 요소 내에서만 구성 요소를 사용할 수 있습니다.
구성요소를 전역적으로 등록:
Vue에서는 Vue.comComponent() 메서드를 사용하여 구성요소를 전역적으로 등록할 수 있습니다. 이 메서드는 구성 요소 이름과 구성 요소 옵션 개체라는 두 가지 매개 변수를 허용합니다. 간단한 예는 다음과 같습니다.
Vue.component('my-component', { template: '<div>这是我的组件</div>' })
위의 코드는 "my-comComponent"라는 구성 요소를 정의하고 해당 템플릿을 지정합니다. 이제 이 구성 요소는 프로젝트의 모든 Vue 인스턴스에서 사용할 수 있습니다.
로컬에서 구성 요소 등록:
Vue에서는 구성 요소 옵션을 사용하여 구성 요소를 로컬로 등록할 수 있습니다. 이 옵션은 Vue 인스턴스 또는 구성 요소에 정의되어 있습니다. 다음은 간단한 예입니다.
var vm = new Vue({ el: '#app', components: { 'my-component': { template: '<div>这是我的组件</div>' } } })
위의 코드는 "my-comComponent"라는 구성 요소를 정의하고 구성 요소 옵션을 사용하여 Vue 인스턴스에 로컬로 등록합니다. 이제 구성 요소는 Vue 인스턴스(#app)의 루트 요소 내에서만 사용할 수 있습니다.
구성 요소 액세스 방법:
구성 요소를 사용하려면 Vue 인스턴스 또는 다른 구성 요소의 템플릿에서 해당 구성 요소를 참조해야 합니다. 템플릿에서는 구성 요소 이름을 사용자 정의 요소의 태그 이름으로 사용할 수 있습니다. 예를 들어 "my-comComponent"라는 구성 요소가 있는 경우 템플릿에 다음 코드를 사용할 수 있습니다.
<my-component></my-component>
Vue는 자동으로 my-comComponent를 구성 요소의 템플릿으로 바꾸고 구성 요소 옵션 및 속성으로 채웁니다.
컴포넌트 내에서 this.$parent 또는 this.$root를 사용하여 상위 Vue 인스턴스에 액세스할 수 있습니다. 또한 구성요소 옵션의 소품 및 이벤트 옵션을 사용하여 데이터 및 이벤트를 전달할 수 있습니다.
props 옵션을 사용하면 데이터를 구성 요소에 전달할 수 있습니다. 구성 요소에서 this.propName을 통해 이러한 속성에 액세스할 수 있습니다. 다음은 간단한 예입니다.
Vue.component('my-component', { props: ['message'], template: '<div>{{ message }}</div>' })
이 예에서 "my-comComponent" 구성 요소는 문자열 유형의 "message" 속성을 정의합니다. 구성 요소에서 템플릿 바인딩을 사용하여 이 속성을 구성 요소의 템플릿에 삽입할 수 있습니다.
<my-component message="Hello World"></my-component>
이 예에서는 "Hello World" 문자열을 구성 요소의 메시지 속성으로 전달합니다. 구성 요소에서 Vue는 이 속성을 해당 템플릿에 바인딩하고 결과에 표시합니다.
이벤트 옵션을 사용하면 이벤트를 구성 요소로 보낼 수 있습니다. 구성 요소가 이벤트를 실행하면 다른 구성 요소 또는 Vue 인스턴스가 이러한 이벤트를 캡처하고 그에 따라 반응할 수 있습니다. 다음은 간단한 예입니다.
Vue.component('my-component', { template: '<button v-on:click="onClick">Click me</button>', methods: { onClick: function () { this.$emit('my-event') } } }) var vm = new Vue({ el: '#app', methods: { onMyEvent: function () { alert('My event was triggered in parent component') } } })
이 예에서 "my-comComponent" 구성 요소는 클릭 이벤트를 정의하고 this.$emit() 메서드를 사용하여 "my-event"라는 사용자 정의 이벤트를 트리거합니다. 그런 다음 Vue 인스턴스에서 v-on 지시문을 사용하여 사용자 정의 이벤트를 캡처하고 콜백 함수를 트리거할 수 있습니다.
<my-component v-on:my-event="onMyEvent"></my-component>
이 예에서는 구성 요소가 "my-event" 이벤트를 실행할 때 호출되는 "onMyEvent"라는 메서드 이름을 전달합니다.
결론:
구성 요소는 재사용 및 확장 가능한 사용자 인터페이스를 쉽게 구축할 수 있게 해주는 Vue 애플리케이션의 핵심 부분 중 하나입니다. Vue 문서에서 구성 요소 참조 및 액세스 방법에는 전역 및 로컬 등록, 소품 옵션 및 이벤트 옵션이 포함됩니다. 이러한 기술을 이해하고 마스터하면 Vue 애플리케이션을 더 쉽게 구축할 수 있습니다.
위 내용은 Vue 문서의 구성 요소에 대한 참조 및 액세스 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!