devlog_zz

vue study - nesting component 본문

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

'Front End > Vue' 카테고리의 다른 글

vue study - primitive type vs reference type  (0) 2020.03.26
vue study - props  (0) 2020.03.25
vue study - nested component  (0) 2020.03.25
vue Study - Refs  (0) 2020.03.25
vue Study - component  (0) 2020.03.25
Comments