Vue_kebab

App.vue

<template>
  <div>
    <kebab username="홍길동" age="20" my-address="서울"/>
    <!-- 
          자식 컴포넌트에 속성을 이용한 데이터 전달
          my-address같은 케밥 표기법으로 넘기면 반드시 받는 쪽은 myAddress와 같이 카멜표기법을 사용
     -->
  </div>
</template>

<script>
import kebab from './components/kebab.vue';
export default{                                     
  //name: 'App',
  components: {
    kebab,
  }
}

</script>

<style>

h1{
  color: blue;
}

</style>

kebab.vue

<template>
  <div>
    {{ username }}<br>
    {{ age }}<br>
    {{ myAddress }}<br>
  </div>
</template>

<script>
export default {
    props: {
        username: String,
        age: String,
        myAddress: String,
    }
}
</script>

<style>

</style>

다른 방식

<template>
  <div>
    {{ username }}<br>
    {{ age }}<br>
    {{ myAddress }}

  </div>
</template>

<script>export default {
    props: ['username', 'age', 'myAddress']
}
</script>

<style>

</style>