Vue에서 구성 방법을 사용하는 방법

Vue는 Vue 구성 요소를 포함하여 많은 유용한 기능을 제공하는 인기 있는 JavaScript 프레임워크입니다. Vue 구성 요소를 사용하면 애플리케이션을 재사용 가능한 작은 부분으로 나눌 수 있습니다. 이 글에서는 Vue 컴포넌트의 기본 사항과 사용 방법을 다룹니다.

Vue 구성 요소의 기본

Vue 구성 요소는 Vue 프레임워크의 일부이며 응용 프로그램의 재사용 가능한 작은 부분을 나타내는 데 사용됩니다. 구성 요소는 HTML, CSS 및 JavaScript를 포함할 수 있으며 응용 프로그램 내에서 여러 번 사용될 수 있습니다. 이는 전체 애플리케이션을 함께 혼합하지 않고도 각 구성 요소를 자체 작업에 집중할 수 있기 때문에 대규모 애플리케이션을 개발할 때 구성 요소를 매우 유용하게 만듭니다.

Vue 구성 요소를 만들려면 Vue.comComponent() 메서드를 사용할 수 있습니다. 이 메서드에는 구성 요소 이름과 구성 요소 옵션 개체라는 두 개의 매개 변수가 필요합니다. 구성 요소 이름은 소문자 문자열이어야 하며 하이픈, 숫자, 문자만 포함할 수 있습니다. 구성 요소 옵션 개체에는 구성 요소의 HTML 코드가 포함된 템플릿 요소가 포함되어야 합니다.

다음은 간단한 Vue 구성 요소 예입니다.

Vue.component('my-component', {
  template: '<div>这是我的组件</div>'
});

이 구성 요소를 애플리케이션에서 사용하려면 Vue 인스턴스에서 참조하세요.

new Vue({
  el: '#app',
  template: '<my-component></my-component>'
});

이 예에서는 Vue 인스턴스 중간의 템플릿에 구성 요소를 추가합니다. 이제 Vue 인스턴스가 인스턴스화되면 페이지에 이 구성 요소가 표시됩니다.

Vue 구성 요소를 사용하는 방법

Vue 구성 요소를 사용하는 방법에는 여러 가지가 있습니다. 다음 섹션에서는 일반적으로 사용되는 몇 가지 방법을 소개합니다.

Props

컴포넌트 간 통신은 Vue 컴포넌트의 중요한 기능입니다. 상위 구성 요소가 하위 구성 요소에 데이터를 전달해야 하는 경우 props 속성을 사용할 수 있습니다. 이는 하위 구성 요소에 소품 배열을 정의하여 수행됩니다.

다음은 props 속성을 사용하는 방법을 보여주는 하위 구성 요소의 예입니다.

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

new Vue({
  el: '#app',
  data: {
    parentMsg: '来自父亲的消息'
  }
});

이 예에서는 "message"라는 props 속성을 정의하고 하위 구성 요소의 템플릿에서 이를 참조합니다. 상위 구성 요소에서는 parentMsg라는 데이터 개체를 정의하고 해당 값을 'Message from parent'로 설정합니다. 이제 상위 구성 요소에서 하위 구성 요소를 사용하고 parentMsg를 prop으로 전달할 수 있습니다.

<div id="app">
  <child-component :message="parentMsg"></child-component>
</div>

이 예에서는 v-bind 지시문을 사용하여 parentMsg를 하위 구성 요소의 메시지 속성으로 바인딩했습니다. 이제 하위 구성 요소는 상위 구성 요소의 메시지를 표시합니다.

Emit

Emit을 사용하면 하위 구성 요소가 상위 구성 요소에 데이터를 전달할 수 있습니다. 하위 구성 요소는 상위 구성 요소에서 사용자 정의 이벤트를 트리거하는 특수 $emit 메서드를 사용할 수 있습니다.

다음은 내보내기를 사용하여 상위 구성 요소에 데이터를 전달하는 하위 구성 요소를 구현하는 방법을 보여주는 예입니다.

Vue.component('child-component', {
  template: '<button v-on:click="emitEvent">发送事件</button>',
  methods: {
    emitEvent: function() {
      this.$emit('my-event', '这是我的消息');
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentMsg: ''
  },
  methods: {
    handleEvent: function(msg) {
      this.parentMsg = msg;
    }
  }
});

이 예에서 하위 구성 요소에는 이벤트를 전송하고 버튼을 클릭할 때 트리거되는 버튼이 포함되어 있습니다. $emit 메소드 'my-event' 이벤트를 사용합니다. 상위 구성 요소에서는 handlerEvent라는 메서드를 정의하고 이를 'my-event' 이벤트에 바인딩합니다. 구성 요소가 이 이벤트를 트리거하면 handlerEvent 메서드가 호출되고 하위 구성 요소가 전달한 메시지를 받습니다.

<div id="app">
  <child-component v-on:my-event="handleEvent"></child-component>
  <p>{{ parentMsg }}</p>
</div>

이 예에서는 handlerEvent 메서드를 'my-event' 이벤트에 바인딩하고 페이지에 parentMsg 값을 표시합니다. 이제 하위 구성 요소가 버튼을 클릭하고 'my-event' 이벤트가 트리거되면 handlerEvent 메서드가 호출되고 하위 구성 요소가 전달한 메시지가 parentMsg 변수에 저장됩니다.

Slot

Slot은 Vue 구성 요소의 또 다른 중요한 기능입니다. 이를 통해 상위 구성 요소가 HTML 코드를 하위 구성 요소에 전달하고 이를 하위 구성 요소의 템플릿에 포함할 수 있습니다.

다음은 Slot 함수를 사용하여 HTML 코드를 하위 구성 요소에 전달하는 상위 구성 요소를 구현하는 방법을 보여주는 예입니다.

Vue.component('child-component', {
  template: '<div><slot></slot></div>'
});

new Vue({
  el: '#app'
});

이 예에서는 하위 구성 요소 템플릿에 요소를 사용합니다. 이 요소는 하위 구성 요소에 해당 HTML 코드를 표시합니다. 이제 상위 구성 요소에서 태그를 사용하고 태그에 HTML 코드를 입력할 수 있습니다.

<div id="app">
  <child-component>
    <h1>这是一级标题</h1>
    <p>这是一段文本</p>
  </child-component>
</div>

이 예에서는 상위 구성 요소의 HTML 코드가 하위 구성 요소의 템플릿에 포함되어 표시됩니다. 페이지에서.

범위가 지정된 슬롯

범위가 지정된 슬롯은 HTML 코드 대신 하위 구성 요소에 데이터를 전달할 수 있는 고급 슬롯 기능입니다. 이는 다양한 컨텍스트에서 구성 요소를 재사용할 수 있으므로 매우 유용합니다.

다음은 범위 지정 슬롯 기능을 사용하여 하위 구성 요소에 데이터를 전달하는 상위 구성 요소를 구현하는 방법을 보여주는 예입니다.

Vue.component('child-component', {
  template: '<div><slot v-bind:user="user"></slot></div>',
  data: function() {
    return {
      user: {
        name: '张三',
        age: 20
      }
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    getUser: function(name, age) {
      alert(name + ' ' + age);
    }
  }
});

이 예에서는 하위 구성 요소 템플릿의 그것에. 상위 구성 요소에서는 getUser라는 메소드를 정의하고 이를 하위 구성 요소의