VUE3 개발 시작하기: 컴포넌트 사용

Vue는 현재 널리 사용되는 JavaScript 프레임워크로, 특히 웹 애플리케이션 개발에서 널리 사용됩니다. VUE3 버전 출시로 VUE는 이전 장점을 가질 뿐만 아니라 객체 지향 프로그래밍 및 성능 향상과 같은 몇 가지 새로운 기능을 추가합니다. 이 기사에서는 VUE3에서 컴포넌트를 사용하는 방법과 컴포넌트를 사용하여 간단한 웹 페이지를 구축하는 방법을 소개합니다.

VUE 구성요소란 무엇인가요?

VUE 구성 요소는 사용자 인터페이스를 만드는 데 사용되는 재사용 가능한 코드 모듈입니다. 각 구성 요소에는 HTML, JavaScript 및 CSS 코드가 포함되어 있으며 코드에서 단일 엔터티로 직접 사용할 수 있습니다.

간단한 버튼 구성 요소를 예로 들어 보겠습니다. 해당 코드는 다음과 같습니다.

<template>
  <button>{{ buttonText }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    buttonText: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
button {
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}
</style>

이 버튼 구성 요소에는 버튼에 표시되는 텍스트에 대한 속성인 ButtonText가 있습니다. 컴포넌트를 사용할 때 이 속성을 전달해야 합니다. 다음은 이 구성 요소를 사용하는 샘플 코드입니다.

<template>
  <div>
    <MyButton buttonText="Click me!" />
  </div>
</template>

<script>
import MyButton from './MyButton.vue'

export default {
  components: {
    MyButton
  }
}
</script>

여기서 구성 요소가 Vue에 도입된 다음 템플릿에서 사용됩니다.

컴포넌트 생성 및 사용

새 컴포넌트를 생성하려면 Vue에서 제공하는 Vue.comComponent() 메서드를 사용해야 합니다. 이 메서드는 구성 요소 이름과 구성 요소를 정의하는 개체라는 두 가지 매개 변수를 받습니다. 다음은 가장 간단한 구성 요소 예입니다.

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

이 코드 조각에서는 구성 요소 이름을 제외한 다른 모든 코드가 개체에 정의되어 있습니다. 구성 요소 변수는 일반적으로 구성 요소를 일반 HTML 마크업과 구별하기 위해 클래스 이름에 대문자를 사용하는 등 관용적인 방법을 사용하여 정의됩니다.

Vue에 이 구성 요소를 도입하세요:

<template>
  <MyComponent />
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

현재 템플릿에서 이 구성 요소를 사용할 수 있습니다.

VUE3에서 컴포넌트 사용

VUE3는 컴포넌트를 생성하고 사용하는 더 나은 방법을 제공합니다. VUE3에서는 createApp 메소드를 사용하여 Vue 애플리케이션을 생성하고, app.comComponent() 메소드를 사용하여 컴포넌트를 등록합니다. 샘플 코드는 다음과 같습니다.

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

const app = createApp({})
app.component('MyComponent', MyComponent)
app.mount('#app')
</script>

위 코드에서 createApp 메소드는 Vue 애플리케이션을 생성하는 데 사용되고 app.comComponent()는 구성 요소를 등록하는 데 사용됩니다. 코드의 마지막 줄은 애플리케이션을 HTML 문서에 마운트하는 데 사용됩니다.

구성 요소 매개변수 전달

위에서 언급했듯이 VUE에서 구성 요소의 일반적인 사용법은 속성과 이벤트를 전달하는 것입니다. 예를 들어 다음 코드 조각에서는

<MyComponent :width="200" @clicked="onClick" />

width 속성이 구성 요소에 전달되고, clicked 이벤트는 구성 요소를 클릭할 때 트리거되며, 여기서 onClick은 이벤트 핸들러입니다.

컴포넌트에 전달된 속성과 이벤트를 사용하려면 VUE에서 제공하는 props 및 Emit 메소드를 사용해야 합니다. 예:

<template>
  <div :style="{ width: width + 'px' }" @click="$emit('clicked')">
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    width: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

구성 요소에서 속성은 props 개체의 일부로 선언됩니다. 기본적으로 소품은 모든 유형입니다. 이 예에서 너비 속성은 숫자 유형으로 정의되고 기본값 100이 할당됩니다. 템플릿에서는 너비가 전달되어 구성 요소의 스타일을 업데이트하는 데 사용됩니다.

구성 요소에서 이벤트를 사용하는 것은 매우 간단합니다. $emit 메서드를 사용하여 이벤트를 호출하면 됩니다. 이 예에서는 사용자가 구성요소를 클릭할 때 clicked 이벤트가 호출됩니다.

요약

Vue는 강력한 JavaScript 프레임워크이며 해당 구성 요소 시스템은 재사용 가능하고 확장 가능한 웹 애플리케이션을 구축하는 데 중요한 부분입니다. 이 글에서는 Vue를 사용하여 컴포넌트를 생성하고 사용하는 방법, Vue3의 createApp 메소드를 사용하여 Vue 애플리케이션을 생성하는 방법, app.comComponent() 메소드를 사용하여 컴포넌트를 등록하는 방법을 소개합니다. 구성 요소는 속성과 이벤트를 전달하기 위해 소품과 방출 메서드를 사용할 수 있습니다. 이 글이 VUE를 배우려는 개발자들에게 도움이 되기를 바랍니다.

위 내용은 VUE3 개발 시작하기: 컴포넌트 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!