VueJS 에서 component 합치기

728x90

라우터로 경로를 지정 후

( 아래 참고 )

soobindeveloper8.tistory.com/249

VueJS 의 index.js

VueJS 의 router 폴더의 index.js 에서는 router 를 지정해준다. 나는 아래와 같이 구성해 놓았다 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(Vue..

soobindeveloper8.tistory.com

HOME 의 구성요소

'/' 를 클릭시에 ../views/Home.vue 이 파일로 이동하는데

../views/Home.vue 파일은 아래와 같다

<template>
  <div class="home">
    <div class="side_menu">
      <SideBar></SideBar>
    </div>
    <div class="lucy_body">
      <Title></Title>
      <SearchCondition/>
      <Btn/>
      <BoardList msg="Welcome to Your Vue.js App"/>
      <Pageing/>
      <popupLayer/>
    </div>
</div>

</template>

<script>
// @ is an alias to /src
import BoardList from '@/components/Home/BoardList.vue'
import Btn from '@/components/Home/Btn.vue'
import SearchCondition from '@/components/Home/SearchCondition.vue'
import Pageing from '@/components/Home/Pageing.vue'
import Title from '@/components/Home/Title.vue'
import SideBar from '@/components/sideMenu/Home_Sidemenu.vue'
import popupLayer from '@/components/Home/popupLayer.vue'

export default {

  name: 'Home',
  components: {
    BoardList,
    Btn,
    SearchCondition,
    Pageing,
    Title,
    SideBar,
    popupLayer
  },
  methods: {
  }
}
</script>

<style scoped>
.home{
  height: 800px;
}
.side_menu{
  float: left;
  width: 13%;
}
.lucy_body{
  float: right;
  width: 85%;
  margin-right: 15px;
}
</style>

Home 은 아래처럼 7개의 컴포넌트 로 구성이 되어있다

상단바 하단바 고정

일단 상단바와 하단바는

App.vue 에서 항상 고정 값이기 때문에 아래처럼 설정을 했다.

router-link

상단바와 사이드바에는 각기 router-link 가 연결 되어 있다.

( <a></a> 태그와 비슷한 역활 )

router-view

router-link 를 클릭하게 되면 router-link 가 가지고 있는 vue를 router-view 가 보여주게 된다.

그렇기 때문에 이 부분만 유동적으로 변할 수 있는 것이다.

components 구성

router-link 가 가르키고 있던 vue 파일 중에 '/' home 파일을 한번 들여다보자.

위에 코드 처럼 import 한 vue 파일이 각기 위치에 배치 된다.

각 vue 파일은 별개로 구성되어 있지만 Home vue 에서 하나의 vue 로 통합되었다.

componenet 더 자세히

BoardList 를 살펴보자.

vue 는 늘 <template> HTML </template> 로 감싸고 있어야 한다

<template>
    <table class="divTableBody">
      <colgroup>
        <col width="40px">
        <col width="18%">
        <col>
        <col width="7%">
        <col width="120px">
      </colgroup>
        <th class="header_th"><input type="checkbox" class="check_box"></th>
        <th class="header_th">채널</th>
        <th class="header_th">문구</th>
        <th class="header_th">사용여부</th>
        <th class="header_th">등록일</th>
      <tr class="divTableRow body_tr" v-for="vo in boardList" v-bind:key="vo.blog">
        <td class="divTableCell"><input type="checkbox" class="check_box"></td>
        <td class="divTableCell">{{vo.channel}}</td>
        <td class="divTableCell">{{vo.phrase}}</td>
        <td class="divTableCell">{{vo.usagestatus}}</td>
        <td class="divTableCell">{{vo.registrationDate}}</td>
      </tr>
  </table>
</template>

<script>
const axios = require('axios')

export default {
  el: '.divTableBody',
  data: function () {
    return {
      boardList: []
    }
  },
  created () {
    axios.get('/data?msg=123')
      .then(res => {
        this.boardList = res.data.boardList
      })
  },
  mounted () {
    console.log('Child mounted')
  },
  methods: {
    popupCreate () {
      alert('aaa')
    }
  }
}
</script>

<style scoped>
@import '../../assets/css/Home/Home.css'
</style>

css 파일을 따로 만들어서 impor 한 방법이다.