컴포넌트 props

 

컴포넌트 props : 배열 형식

 

Comp.vue

---

// HTML
<template>

  <p :title="test1">{{ test1 }}</p>
  <p :title="test2">{{ test2 }}</p>

</template>

// Javascript
<script setup>

  defineProps(['test1', 'test2']);  

</script>

// CSS
<style>
</style>

 

App.vue

---

// HTML
<template>
	
  <Comp :test1="'test1'" :test2="'test2'"/>

</template>

// Javascript
<script setup>
	
  import Comp from './Comp.vue';
  
</script>

// CSS
<style>
</style>

 

컴포넌트 props : 오브젝트 형식

 

Comp.vue

---

// HTML
<template>

  <p :title="txt">{{ txt }}</p>
  <p>{{ num }}</p>

</template>

// Javascript
<script setup>

  defineProps({
    txt: String,
    num: Number
  })

</script>

// CSS
<style>
</style>

 

App.vue

---

// HTML
<template>
	
  <Comp :txt="'txt'" :num="5"/>

</template>

// Javascript
<script setup>
	
  import Comp from './Comp.vue';
  
</script>

// CSS
<style>
</style>