[Vue] import하기, component 사용하기

데이터나 component를 사용하기 위해 다른 파일에 작성한 것을 부모파일에 사용할때 import를 해줘야 한다.

한 파일에 다 써도 되지만 보기 편하고 수정하기 편하게 하기 위해 자주 쓰는 태그? 컴포넌트나 데이터는 다른 파일에 작성하고 끌어다 쓴다.

 

이런 div창을 만든다고 할때 한 파일안에 작성해두면 코드가 길어지니까 함수처럼? 만들수 있다.

1. 먼저 파일을 새로 생성한 다음에 위에 사진처럼 div 박스를 작성한다.
파일명은 Discount.vue로 했다.

<template>

    <div class="discount">
        <h4>지금 결제하면 20% 할인</h4>
    </div>

</template>

<script>

export default {
    name: 'Discount',
}

</script>

<style>
.discount {
  background: #eee;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
</style>

위에 코드가 자식 이 될꺼고 저걸 부모파일에 사용할 거다. 그렇기 때문에 <script>의 export default부분에 
name: 'Discount'이렇게 작성했다. name이부분은 그냥 작명하면 된다는데 왜 넣는건지는 잘 모르겠다ㅎㅎ

 

2. 그리고 사용할 부모창에서 import를 해준다.

<template>
	<p>1</p>
	<Discount/>
    <p>2</p>

</template>

<script>

import Discount from './Discount.vue';

export default {
  name: 'App',
  data(){
    return {
       products : roomData
      , modalNum : 0
    }
  },

  methods : {

  },
  components: {
    Discount : Discount,
    //왼쪽에는 아무렇게나 이름을 지어도 된다. 이 화면에서 사용할 이름을 짓는 부분
  }
}
</script>

<style>

</style>

먼저 위 코드처럼 <script>아래에 import문을 작성한다.
import 변수명(아무렇게나) from '경로';
변수명은 부모창에서 사용할 변수를 적으면 된다.

3. 그다름 components 부분에 import한 걸 선언해주면 된다.
왼쪽에는 내가 원하는 변수명을 쓰면되고(작명) 오른쪽에는 import에 적었던 변수를 적으면된다.
만약 둘이 똑같이 쓰면 그냥  Discount라고 적으면된다.

 

4. 그리고 내가 원하는 부분에 <내가 정한 변수명/>을 하면 쓸 수 있다.

이런식으로 사용이 가능하다.