Front End/Vue

vue study - nesting component

YJ_SW 2020. 3. 25. 17:05
728x90

컴포넌트 템플릿안에는 하나의 root element만 존재해야한다

-> <div></div>태그로 전체 묶기

 

<style scoped> :  스타일 태그가 해당 컴포넌트에만 적용된다.

App.vue

<template>
  <div>
    <app-header></app-header>
    <app-ninjas></app-ninjas>
    <app-footer></app-footer>

  </div>
</template>

<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
import Ninjas from './components/Ninjas.vue'


export default {
  components:{
    'app-header':Header,
    'app-footer':Footer,
    'app-ninjas':Ninjas

  }

}
</script>

<style>
</style>

 

728x90