[Vue] Component

컴포넌트 사용에는 전역적인 방법과 지역적인 방법이 있는데, 여기서는 가장 많이 사용하는 지역적인 방법만 다룬다.

 

1. 컴포넌트 생성

nav-component.vue

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <el-menu-item index="1">Processing Center</el-menu-item>
    <el-submenu index="2">
      <template slot="title">Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
      <el-submenu index="2-4">
        <template slot="title">item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-menu-item index="3" disabled>Info</el-menu-item>
    <el-menu-item index="4"
      ><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item
    >
  </el-menu>
</template>

<script>
export default {
  name: "nav-component",
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style></style>

 

2. 컴포넌트 사용

<template>
  <div>
    <navComponent></navComponent>
    Home me
  </div>
</template>
<script>
import navComponent from "@/components/nav-component";
export default {
  name: "Home",
  components: {
    navComponent,
  },
};
</script>

사용하고자 하는 부모vue에서 컴포넌트 import 및 components 에 등록