vue props / non-props

서로 다른 모듈간 속성 값 전송

필요한 파일

1. App.vue
2. Hello.vue

상황

1. Hello.vue 최상위 태그 1개
2. Hello vue 최상위 태그 1개 + inheritAttrs : 'false'
3. Hello.vue 최상위 태그 2개
4. Hello.vue 최상위 태그 2개 + $attr 적용
5. Hello.vue 최상위 태그 2개 + $attr 적용 + v-bind

적용하기

• App.vue

<template>
  <h1>{{ msg }}</h1>
  <Hello
    class="hello"
    @click="msg += '!'"
  />
</template>

<script>
  import Hello from '~/component/Hello.vue'
   export default{
      components : {
        Hello
      },
     data(){
        return {
         msg : 'Hello Vue!'
        }
     }
   }
</script>

Hello의 class로 hello를 클릭이벤트로 msg 값에 !를 추가

• Hello.vue

<template>
  <!-- case1 -->
  <!--<h1>hello</h1>-->

  <!--  case2-->
  <!--  <h1>hello</h1>-->
  <!--  <h2> Haha</h2>-->

  <!--case3-->
  <!--  <h1-->
  <!--    :class="$attrs.class"-->
  <!--  >-->
  <!--    hello-->
  <!--  </h1>-->
  <!--  <h2 @click="$attrs.onClick">-->
  <!--    Haha-->
  <!--  </h2>-->

  <!-- case4 -->
<!--  <h1-->
<!--    v-bind="$attrs"-->
<!--  >-->
<!--    Hello-->
<!--  </h1>-->
<!--  <h2>-->
<!--    Haha-->
<!--  </h2>-->
</template>

<style scoped lang="scss">
    $color : red;
    h1{
        color:$color;
    }
</style>

<script>
    export default{
    //case1.5에서 적용  
    // inheritAttrs : false,
      props : {
        style : Object
      },
      mounted(){
        console.log(this.$attrs)
      }
    }
</script>

case1

 <h1>hello</h1>

단일 태그로 적용되어 class와 이벤트 모두 적용된다.

case1.5

 <h1>hello</h1>

단일 태그로 적용되나 inheritAttrs : false로 인해 적용이 되지않는다.

case2

<h1>hello</h1>
<h2> Haha</h2>

다중 최상위 태그로 적용되어 제대로 된 대상을 찾을 수 없어서 class와 이벤트가 모두 적용되지 않는다.

case3

  <h1
    :class="$attrs.class"
  >
    hello
  </h1>
  <h2 @click="$attrs.onClick">
    Haha
  </h2>

다중 최상위 태그로 적용되며 각각마다 필요한 속성을 $attrs를 통해 적용시켜 h1에서는 class가 h2에서는 click이벤트가 적용된다.

case4

<h1
    v-bind="$attrs"
  >
    Hello
  </h1>
  <h2>
    Haha
  </h2>

다중 최상위 태그로 적용되며 v-bind를 통해 적용된 속성 모두를 h1태그에 적용시킨다.