민아의 기록일지

TableComponent.vue 를 여러 화면에서 가져오는데, 매번 "등록" 이라는 버튼에 path가 변경되게 변수로 주고받으려고 한다.

TableComponent.vue 를 먼저 살펴보자

<template>
  <div>
    <vue-good-table
      theme="polar-bear"
      :columns="columnInfo"
      :rows="rowsInfo"
      :line-numbers="true"
      :select-options="{
        enabled: true,
      }"
    >
      <div slot="selected-row-actions">
        <button @click="deleteAction">삭제</button>
      </div>
      <div slot="table-actions">
        <router-link to="/user/projects/register">등록</router-link>
      </div>
    </vue-good-table>
  </div>
</template>

<script>
import "vue-good-table/dist/vue-good-table.css";
import { VueGoodTable } from "vue-good-table";
export default {
  name: "my-component",
  props: {
    columnInfo: {
      type: Array,
    },
    rowsInfo: {
      type: Array,
    },
  },

여기서 주목해야할 부분은 <router-lint> 부분이다!!!  이렇게 TableComponent 에 박아버리면, 다른 곳에서 테이블을 사용할 때도 저 '등록' 이라는 버튼은 저기로 갈 것이니까 우선, 변수로 어떻게 처리할까 고민하다가

생각보다 쉽더라, 일단 to 를 변수로 받을 것이니까 v-bind 를 이용해주면 된다. 약어인  :to 로 해준다. 그런 후에 부모 컴포넌트에 변수를 설정해 테이블 컴포넌트에 보내주면 된다.ProejctListView.vue 가져다가 쓸 부모 컴포넌트를 살펴보자. 

<template>
  <div>
    <TableComp
      :columnInfo="columnInfo"
      :rowsInfo="rowsInfo"
      :toUrl="toUrl"
    ></TableComp>
  </div>
</template>
<script>
import TableComp from "@/components/TableComponent.vue";
export default {
  components: {
    TableComp,
  },
  data() {
    return {
      columnInfo: [
       --- 생략
      ],
      rowsInfo: [
       --- 생략
      toUrl: "/user/projects/register",
    };
  },
};
</script>

이렇게 toUrl 이라는 변수를 선언해서 url 을 지정해주고

TableComponent.vue 에서

<template>
  <div>
    <vue-good-table
      theme="polar-bear"
      :columns="columnInfo"
      :rows="rowsInfo"
      :line-numbers="true"
      :select-options="{
        enabled: true,
      }"
    >
      <div slot="selected-row-actions">
        <button @click="deleteAction">삭제</button>
      </div>
      <div slot="table-actions">
        <router-link :to="toUrl">등록</router-link>
      </div>
    </vue-good-table>
  </div>
</template>

<script>
import "vue-good-table/dist/vue-good-table.css";
import { VueGoodTable } from "vue-good-table";
export default {
  name: "my-component",
  props: {
    columnInfo: {
      type: Array,
    },
    rowsInfo: {
      type: Array,
    },
    toUrl: { type: String },
  },
  methods: {
    deleteAction() {
      alert("삭제하시겠습니까?");
    },
  },
  components: {
    VueGoodTable,
  },
};
</script>

해주면 끄읏!