자식 컴포넌트로 데이터 보내기

 

----------------------------------------------------------------------------------------------------------------

<template>

  <MallHeader :title='title'/>

  <MallContent :products='products'/>

  <MallFooter :companyName='company'/>

</template>

<script>

import MallHeader from "./components/MallHeader.vue";

import MallContent from "./components/MallContent.vue";

import MallFooter from "./components/MallFooter.vue";

export default {

  name: 'App',

  components: {

    MallHeader,

    MallContent,

    MallFooter

  },

  data() {

    return {

      title: 'Vue 쇼핑몰',

      products: ['아이폰','갤럭시22', '아이패드 프로'],

      company:'goldencrab'

    };    

  }

}

</script>

<style>

</style>

----------------------------------------------------------------------------------------------------------------

 

<template>

  <h1>{{title}} 쇼핑몰에 오신것을 환영합니다.</h1>

  <hr/>

</template>

 

<script>

export default {

  props: ['title']

}

</script>

 

<style>

 

</style>

----------------------------------------------------------------------------------------------------------------

<template>

<ur>

  <li>{{products[0]}}</li>

  <li>{{products[1]}}</li>

  <li>{{products[2]}}</li>

</ur>

</template>

 

<script>

export default {

  props:['products']

}

</script>

 

<style>

 

</style>

 

----------------------------------------------------------------------------------------------------------------

<template>

  <br/>

  <h3>Copyright 2022 by {{companyName}}</h3>

</template>

 

<script>

 

export default {

  props:['companyName']

}

</script>

 

<style>

 

</style>