close

Components Vue.js에서: 생성, 재사용 및 데이터 전달

Components 구조화되고 유지 관리 가능한 웹 애플리케이션을 구축할 수 있게 해주는 Vue.js의 중요한 개념입니다. 을(를) 사용하면 components 애플리케이션을 각각 사용자 인터페이스의 특정 부분을 담당하는 독립적인 작은 부분으로 나눌 수 있습니다.

이 기사에서는 Vue.js에서 생성하고 components 이를 사용하여 코드를 재사용하고 components. props 부모 구성 요소에서 자식 구성 요소로 데이터를 전달하는 데 사용하는 방법과 이벤트를 사용하여 자식 구성 요소에서 부모 구성 요소로 데이터를 다시 전달하는 방법에 대해 자세히 알아봅니다 .

 

1. 만들기 Components

Components Vue.js에서 `Vue.component` 메서드를 사용하거나 단일 파일을 정의하여 생성할 수 있습니다 components. 

 예:  

// Global Component using Vue.component  
Vue.component('my-component', {  
  // Component options  
});  
  
// Local Component using single-file component  
// MyComponent.vue  
<template>  
  <!-- Component template -->  
</template>  
  
<script>  
export default {  
  // Component options  
};  
</script>

 

2. 구성요소 구조

Vue 구성 요소는 템플릿, 스크립트 및 선택적 스타일로 구성됩니다. 템플릿에는 HTML 마크업이 포함되어 있고 스크립트에는 구성 요소 옵션(데이터, 메서드, 계산된 속성, 수명 주기 후크)이 포함되어 있으며 스타일은 구성 요소의 모양을 정의합니다.

예:

<template>  
  <div>  
    <h1>{{ message }}</h1>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello, Vue!',  
      count: 0  
    };  
  },  
  methods: {  
    increment() {  
      this.count++;  
    }  
  }  
};  
</script>  
  
<style scoped>  
/* Component styles */  
</style>

 

3. 컴포넌트 재사용성

Components Vue.js의 코드를 애플리케이션 전체에서 재사용할 수 있으므로 코드 중복이 줄어들고 유지 관리가 향상됩니다. 모듈식 접근 방식을 장려하여 더 작은 것을 더 큰 것으로 구성할 수 있습니다 components.

예:

// ParentComponent.vue  
<template>  
  <div>  
    <child-component></child-component>  
    <child-component></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  }  
};  
</script>

 

4. Props

Props components 부모에서 자식으로 데이터를 전달할 수 있습니다 components. Props 자식 구성 요소에서 선언되며 일반 데이터 속성처럼 사용할 수 있습니다.

예:

// ParentComponent.vue  
<template>  
  <div>  
    <child-component:message="parentMessage"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from parent!'  
    };  
  }  
};  
</script>  
  
// ChildComponent.vue  
<template>  
  <div>  
    <h2>{{ message }}</h2>  
  </div>  
</template>  
  
<script>  
export default {  
  props: ['message']  
};  
</script>

 

5. 커스텀 이벤트

Components 부모와 통신하기 위해 맞춤 이벤트를 내보낼 수 있습니다 components. 부모는 components 이러한 이벤트를 듣고 그에 따라 반응할 수 있습니다.

예:

// ChildComponent.vue  
<template>  
  <div>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    increment() {  
      this.$emit('increment-event');  
    }  
  }  
};  
</script>  
  
// ParentComponent.vue  
<template>  
  <div>  
    <child-component @increment-event="handleIncrement"></child-component>  
    <p>Count: {{ count }}</p>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      count: 0  
    };  
  },  
  methods: {  
    handleIncrement() {  
      this.count++;  
    }  
  }  
};  
</script>

 

이 예제는 Vue.js의 핵심 개념을 보여주고 components 유연성, 재사용성 및 커뮤니케이션 기능을 보여줍니다. Components Vue.js를 확장 가능한 애플리케이션을 구축하기 위한 강력한 프레임워크로 만드는 모듈식 및 유지 관리 가능한 코드를 만드는 데 도움이 됩니다.