v-bind 사용법. 부모의 데이터를 자식 템플릿에 전달하는 방법.

Vue의 v-bind로 부모에서 자식으로의 데이터 전달을 정리.

다음과 같은 vue 파일을 보았을 때에 :key 등 태그의 내용(임의로 설정한 속성)이 무엇을 나타내고 있는지를 이해할 수 있게 된다.

<VrBtn
:key="key"
:disabled="disabled"
:command="command"
/>

export default {
  props: {
    value: { type: Boolean },
    disabled: { type: Boolean, default: false },
    command: { type: Object, required: true },
  },
}

데이터 전달 흐름

데이터 전달의 흐름은 4steps.
속성에 변수를 넣고 그 속성을 부모와 자식으로 받는다.

親：①子に渡すデータを定義
　↓
親：②子のテンプレートタグに属性と変数を記述
　↓
子：③propsで受け取る属性を定義
　↓
子：④属性を指定してデータ呼び出し

▼주의점
・부모로부터 건네주는 데이터는 변수.
┗ 더블 쿼테이션으로 둘러싸지만 텍스트는 아니다.
┗ :属性名="変数名" 의 형태로 기술. 속성을 아이에게 건네준다.
┗ : 는 v-bind: 의 약어

・자식의 props에서는 데이터의 형태등을 지정 가능
┗ String : 문자열, Boolean : 진위 값
　┗ required: true 데이터 필요성
┗ default: false/true 진위값의 기본 설정

데이터 전달 예

・사용하는 파일은 2개
상위:parent.vue
아이 : TmpBtn.vue (vuetify로 버튼 표시)

· 실현하고 싶은 것
부모가 정의한 데이터를 자식 템플릿 내에서 호출합니다.

(부모)parent.vue

<template>
  <v-app>
    <TmpBtn
    <!--②子のテンプレートタグに属性と変数を記述-->
    :bind="text"
    />
  </v-app>
</template>

<script>
import TmpBtn from "./TmpBtn"

export default {
  name: "Parent",
  components:{
    TmpBtn
  },
  data(){
    return{
      //①子に渡すデータを定義
      text:"Text form Parent"
    }
  }
}
</script>

(자식) TmpBtn.vue

<template>
  <v-btn
  width="20%"
  elevation="2"
  rounded
  >
  <!--④属性を指定してデータ呼び出し-->
  {{bind}}
  </v-btn>
</template>

<script>
export default {
  props:{
    //③propsで受け取る属性を定義
    bind: {type:String},
  }
}
</script>

▼출력 결과


자식 템플릿을 볼 때 안전하고 부모의 데이터를 전달할 수있었습니다.

요약

아래와 같은 설명을 보면, 부모로부터 아이에게 데이터를 건네주고 있는 것을 알 수 있다.

<VrBtn
:key="key"
:disabled="disabled"
:command="command"
/>

props가 있으면, 아이의 템플릿으로 부모로부터 데이터를 받고 있다는 것을 알 수 있다.

export default {
  props: {
    value: { type: Boolean },
    disabled: { type: Boolean, default: false },
    command: { type: Object, required: true },
  },
}