2023/06/30__VueJS(Vue3)

Props

• 컴포넌트에 데이터를 넘겨줄 수 있는 사용자 지정 속성
• 컴포넌트 생성 시 넘겨 받을 데이터 결정
• 일반적으로 props 옵션에 키와 값을 배열로 지정하여 사용
• props : ['name,'age','job']
• 특정한 props나 정해진 데이터 타입이 필요한 컴포넌트는 props 옵션의 값을 배열 대신 객체로 변경하고 상세 내용 지정

Props 속성

type	데이터 타입 정리
default	해당 props가 들어오지 않을 경우 사용할 기본값
	데이터 타입이 Object인 경우 반드시 팩토리 함수를 이용해 값 반환
required	true로 설정
	props가 들어오지 않은 경우 콘솔에 경고 출력
	default 설정 시 기본값이 적용(에러 출력되지 않음)
validator	잘못 들어온 인자를 개발자 코드로 직접 겈사해 콘솔창에 경고 출력

Non-Prop 속성

• Class 나 Style, id 속성 등 대상 컴포넌트의 props나 emits 옵션에 정의되어 있지는 않으나 대상 컴포넌트에 전달되어 필요한 역할을 수행하는 컴포넌트 속성
• 스크립트의 $attr로 접근가능
• <p> {{$attr.title}} </p>
• 컴포지션 API의 setup 함수를 이용하는 경우 두번째 인자(context) 활용
• context 매개 변수는 attrs 속성을 가지고 있으며 non-prop의 정보를 가지고 있음
• setup(props, context){ const title = context.attrs.title }
• 템플릿 내 루트 노드에 상속

사용자 이벤트 생성

Chat GPT

 

Vue에서 $emit과 $attr은 컴포넌트 간에 데이터를 전달하고 속성을 동적으로 설정하는 데 사용되는 두 가지 중요한 기능입니다.

$emit은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 사용됩니다. 부모 컴포넌트에서 $emit을 사용하여 이벤트를 발생시키고, 자식 컴포넌트에서는 그 이벤트를 감지하고 데이터를 받을 수 있습니다. 예를 들어, 부모 컴포넌트에서 "update"라는 이벤트를 발생시키고 데이터를 함께 전달하고 싶을 때, $emit('update', data)와 같이 사용할 수 있습니다. 자식 컴포넌트에서는 @update="handleUpdate"와 같이 이벤트를 감지하고 handleUpdate 메서드에서 전달된 데이터를 사용할 수 있습니다.

$attr은 컴포넌트에 동적으로 속성을 추가하거나 속성 값을 가져오는 데 사용됩니다. 예를 들어, 부모 컴포넌트에서 <child-component foo="bar"></child-component>와 같이 자식 컴포넌트에 foo라는 속성을 동적으로 추가하고 싶을 때, 자식 컴포넌트에서 $attrs.foo를 사용하여 bar 값을 가져올 수 있습니다. 또한, 자식 컴포넌트에서 $attrs를 통해 모든 동적으로 추가된 속성을 가져올 수도 있습니다.

요약하자면, $emit은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, $attr은 컴포넌트에 동적으로 속성을 추가하거나 가져올 때 사용됩니다. 이러한 기능을 사용하여 Vue 컴포넌트 간에 유연하게 데이터를 전달하고 속성을 설정할 수 있습니다.

사용자 이벤트 생성

• 컴포넌트의 emits 옵션에 이벤트명 지정
• emits: ['myevent-1','myevent-2']
• 이벤트명 작성시 케밥 케이스 형식의 소문자로 작성
• props와 마찬가지로 객체 형식을 이용하여 이벤트 전달값이 올바른지 판단 가능
• emits:{ //검증함수의 인자는 해당 이벤트가 생성하는 이벤트 값 입력 'myevent-1' :({name, value}) => { //name과 value값이 반드시 존재해야 이벤트 처리 return name && value } }

v-model과 이벤트 결합

• v-model : 양방향 데이터 결합
• v-model 디렉티브에 연동된 변수는 컴포넌트의 props 속성과 연동
• <Component v-model:msg='Message'></Excomponent> props:{msg:String}
• v-model로 전달된 변수의 값은 컴포넌트 안에서 업데이트되어 변수를 전달한 부모 컴포넌트와 동기화
• 업데이트를 위해서 접두사와 변수명을 ":"으로 결합한 이벤트명 사용
• emits:['update:msg'] $emit('update:msg',$event.garget.value)
• vue3에서는 여러 개의 v-model 디렉티브 지원
• props에 v-model 디렉티브를 위한 변수를 여러 개 설정하고 emits에도 동일하게 설정하여 여러 개의 값을 양방향으로 결합
• props:{msg: String, type:String} #emit('update:msg',$event.target.value) #emit('update:type',$event.target.value)

provide & inject

provide & inject

• 컴포넌트 간 데이터 전달에 사용
• vue2에서 컴포넌트 간 데이터 전달을 위해 비표준 방식의 Event Bus를 생성하는 방식 대신 사용
• 비 반응성 형식이지마 ref, reactive, computed와 같은 함수를 이용해 반응성을 가지는 변수를 provide 할 경우 inject된 값도 반응성 유지

provide

• 부모 컴포넌트에서 자식 컴포넌트들과 공유할 데이터 정의

inject

• 부모 컴포넌트가 가지고 있는 데이터를 접근할 때 사용

<script>
import Header_Comp from './components/Header_Comp.vue'
import Footer_Comp from './components/Footer_Comp.vue'
export default {
  provide: {
    msg: '데이터 공유하기',
    msg2: 'hoooooo'
  },
  components: {
    Header_Comp
  }
}
</script>

<template>
  <Header_Comp />
  <div>
    <h1>HELLO</h1>
  </div>
</template>
///////

Header_comp
|
|
<script>
export default {
  inject: ['msg', 'msg2']
}
</script>
<template>
  <header>
    <h1>아하하하</h1>
    <h2>{{ msg }}</h2>
    <h2>{{ msg2 }}</h2>
  </header>
</template>

Mixins

mixins

• 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용
• vue3에서 컴포지션 함수로 대체 가능해져 사용성 축소
• 컴포넌트의 옵션과 동일한 옵션들을 모두 정의 가능하므로 mixins를 호출하는 컴포넌트와 충돌 발생할 수 있음
• mixins는 컴포넌트보다 우선 호출
• 컴포넌트의 변수나 함수의 이름과는 충돌하는 것을 방지하기 위해 이름 변경 필요
• 예) 컴포넌트 변수명 : title => mixins 변수명: mixins_title
• var HelloMixins = { // 컴포넌트 옵션 (data, methods, created 등) } new Vue({ mixins:[HelloMixins] })