일하면서 기록하기

https://dkfkslsksh.tistory.com/72

https://cchoimin.tistory.com/96

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

이런 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. 그리고 내가 원하는 부분에 <내가 정한 변수명/>을 하면 쓸 수 있다.

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

부모가 가진 데이터를 자식창에서 사용하고 싶을때 쓰는 방법

예를 들어
1. component를 위해 다른 파일에 박스창을 만든다.
2. 부모창에 component를 쓰기 위해 import를 한다.
3. 부모창에 데이터를 상속?하기 위해 데이터 바인딩을 한다. 아래 처럼 적는다.

부모화면
<template>

	<Modal :products="products"/>
    <!-- <Modal v-bind: products="products"/> -->
    
</template>

<script>

import Modal from './Modal.vue';

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

  methods : {
  },

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

</script>

4. 다른 파일에 있는걸 사용하기위해 import를 한다. <script> 바로 아래부분에 import를 적어준다.
import 변수명 from 파일경로;

5. compents 부분에는 왼쪽에 현재 창에서 사용할 변수명을 짓고
오른쪽에는 import한 이름을 쓴다.

6. 사용할 부분에 <Modal/>이렇게 쓰고 바인딩을 위해 v-bind:를 쓴다.
<Modal v-bind: 작명="아래에 선언한 데이터명">
v-bind는 :로 써도 된다
<Modal :작명="아래에 선언한 데이터명">

7. 그리고 자식창의 <script>부분에 props를 작성한다.

<script>

export default {
    name: 'Modal',
    props : {
      products: Object,
      //부모창에 있는 데이터 명을 적고 오른쪽에는 데이터의 형식을 적는다.
    }
}

</script>

이렇게 하면 부모창에서 components를 사용할 수 있다.