[Vue] props

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

 

예를 들어
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를 사용할 수 있다.