[Vue] props로 문자 데이터가 아닌 다른 데이터(숫자, 객체, 선언한 데이터 등)을 전달하는 방법

props로 문자 데이터 전달

App.vue

<template>
  <HelloWorld message="Hello World" />
</template>

<script>
import HelloWorld from '~/components/HelloWorld'

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

HelloWorld.vue

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  }
}
</script>

 

props로 문자가 아닌 다른 데이터 전달

props를 전달할때 v-bind: 디렉티브를 사용해 데이터를 전달한다. 이때 v-bind는 생략하고 :만 사용할 수 있다.

App.vue

:v-bind를 사용해 props값으로 숫자데이터를 전달하고 있다.

<template>
  <HelloWorld :message="1" />
</template>

<script>
import HelloWorld from '~/components/HelloWorld.vue'

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

만약 :v-bind를 사용해 props값으로 문자데이터를 전달하고 싶다면 쿼트로 한번 더 감싸준다.

<template>
  <HelloWorld :message="'1'" />
</template>

<script>
import HelloWorld from '~/components/HelloWorld.vue'

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

선언한 데이터를 속성으로 가질때도 v-bind: 디렉티브를 사용한다.

<template>
  // data 옵션에서 생성한 message라는 데이터를 연결했다
  // v-bind:로 연결했기 때문에 message는 문자열이 아니다
  <HelloWorld
    :message="message" />
</template>

<script>
import HelloWorld from '~/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  },
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>