컴포넌트

컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있습니다. 따라서 앱이 중첩된 컴포넌트의 트리로 구성되는 것은 일반적입니다

props

props컴포넌트가 실행될때 속성처럼 받아내는 정의해주는 옵션

외부에서 컴포넌트에 props를 넘길 때 어떤 속성이 처리할건지 정의

부모컴포넌트 - 자식 컴포넌트의 통신에 사용

App.Vue
<template>
    <MyBtn >Banana</MyBtn> 
//slot을 사용하기 위해 <A></A> 형태로 만듬
//slot을 사용하면 Banana같은 변수를 입력해서 전달 가능

    <MyBtn  
      :color = "color"> // color 클래스 입력
      <span style ="color: red;">Banana</span>
//slot에 hmtl코드와 같이 입력해서 전달가능
    </MyBtn>

    <MyBtn large color = "royalblue">Apple</MyBtn>
//large클래스 전달과 color값 전달

    <MyBtn >Cherry</MyBtn>
    <button>Dia</button>
</template>

<script>
import MyBtn from '~/components/MyBtn'
//컴포넌드 가져오기
export default {
  components: {
    MyBtn
  },
  data() {
    return {
      color: '#000' // 컬러설정
    }
  }
}
</script>

MyBtn.vue
<template>
    <div 
        :class="{ large }" // large라는 클래스를 `입력`받을수 있음
        :style = "{backgroundColor: color}" // 배경을 `입력`받을 수 있음
        class = "btn"> //기본클래스
        <slot></slot> // Banana, Apple 같은 요소 입력받을수 있음
    </div>
</template>

<script>
export default{ 
    props: { //이게 있어야 속성을 받을수 있다. 
        color: { //color속성
        type: String,
        default:'gray'
        },
        large: { //속성
            type: Boolean,
            default: false
        },
    }
}
</script>

<style scoped lang="scss">

    .btn{
        display: inline-block;
        margin: 4px;
        padding: 6px, 12px;
        border-radius:  4px;
        background-color: gray;
        color:  white;
        cursor: pointer;
        &.large{ //scss문법
          font-size: 40px;
          padding: 10px, 20px;
        } 
    }

</style>

속성상속

inheritAttr : 최상위 컴포넌트가 여러개이면 상속 옵션이 지정되지 않는다

속성 상속을 비활성화하는 일반적인 시나리오는 루트 노드 이외의 다른 엘리먼트에 속성을 적용해야 하는 경우이다.

루트노드가 여러개여서 속성상속이 지정되지 않으니 일단 속성상속을 비활성화 하고
상속이 필요한 특정한 컴포넌트 루트에 상속을지정해준다

<template>
//루트노드가 2개이다.
    <div 
        class = "btn">
        <slot></slot>
    </div>
    
    	// 속성상속을 사용하지 않아 모두 속성상속 적용이 안되는상태 
        //이 루트노드는 속성상속을 사용하기위해 설정했음 
    <h1 
        :class="$attrs.class" 
        :style = "$attrs.class">
    </h1>
    
    //위랑 같지만 '모든 속성값'을 다 상속받을떄엔 이렇게 사용하자
    <h1 v-bind = "$attrs"></h1>
    
</template>

<script>
export default{
  inheritAttrs: false 
  // 속성상속을 사용하지 않겠다. 루트노드가 여러개이면 사용하자
}

</script>

emit

이벤트를 상속받을때 사용한다, 직접 사용자 정의 이벤트를 발신한다.

<template>
    <MyBtn  
    @click  = "log" //@click이벤트
	@userevent ="log" //사용자 정의 이벤트
	@change = "logmsg"> //사용자 정의 이벤트
  	Hi
    </MyBtn>
</template>

<script>
import MyBtn from '~/components/MyBtn'
//컴포넌드 가져오기
export default {
  components: {
    MyBtn
  },
  method: {
    log(event) {
    	console.log("click")
      	console.log(event)
    },
    logMsg(msg) {
      	console.log(msg)
    }
  }
}
</script>

<template>
    <div class= "btn">
		<slot></slot>
	</div>

	// 사용자 정의 이벤트를 받아 설정되있는 이벤트를 실행한다.
	<h1 @dbclick="$emit('userevent', $event)"> 
        AAA
    </h1>

    <input
    type="text"
    v-model="msg">

</template>

<script>
export default {
    // 사용자 정의 이벤트 이름 등록!!
  emits: {
        'userevent',
        'change'
  },

  data() {
        return {
            msg = ''
        }
    },
    watch: {
      // 사용자 정의 이벤트를 실행. msg가 변경될떄마다 change가 실행된다.
        msg(){
             this.$emit('change', $event)
        }
    }
 
}
</script>