Vue 문서의 구성 요소에 대한 참조 및 액세스 방법

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!