[VUE + TYPESCRIPT] Prop 자식에게 데이터 전달하기

VUE.JS 목록

$ touch src/components/Child.vue

 

src/components/Child.vue 파일을 생성하고 아래와 같이 코딩합니다.

<template>
    <div>
        {{ parentMessage }}
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue} from 'vue-property-decorator';

@Component
export default class Child extends Vue {
    @Prop() parentMessage?: string;
}
</script>

 

src/components/Home.vue 파일을 아래와 같이 수정합니다.

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <child parentMessage="안녕"></child>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import Child from '@/components/Child.vue';

@Component({
    components: {
        Child,
    },
})

export default class Home extends Vue {}
</script>

 

서버를 구동합니다.

$ yarn serve

표현식 변수 사용하기

Home.vue에서 parentMessage를 동적인 변수로 사용할수 있습니다.

 

...
    <child :parentMessage="message"></child>
...

<script lang="ts">
...
export default class Home extends Vue {
    message: string = '안녕하세요.';
}
</script>

/src/componets/Home.vue 파일을 위와 같이 수정합니다.

전체 코드는 아래와 같습니다.

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <child :parentMessage="message"></child>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import Child from '@/components/Child.vue';

@Component({
    components: {
        Child,
    },
})

export default class Home extends Vue {
    message: string = '안녕하세요.';
}
</script>

 

 

 

parent로 데이터 전송하기

1. Propsync 사용

<template>
  <div>
    <child :item.sync="listItem"></child>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Child from '@/components/Child.vue'

@Component({
  components: {
    Child
  }
})
export default class TsrMainViewComponent extends CommonMixin {
  listItem = ['hello']
  mounted () {
    //
  }
}
</script>

<template>
  <div>
  	<button @click="update">update</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, PropSync } from 'vue-property-decorator'
import { CommonMixin } from '@/mixins/index'

@Component
export default class TsrListsComponent extends CommonMixin {
  @PropSync('item') listItem?: any

  update () {
    this.listItem.push('b')
  }

  mounted () {
    console.log(this.listItem)
  }
}
</script>

 

 

 

2. Prop and Emit 사용

<template>
  <div>
    <child :option="listOption" @update:option="updateOption"></child>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Child from '@/components/Child.vue'

@Component({
  components: {
    Child
  }
})
export default class TsrMainViewComponent extends CommonMixin {
  listOption = { a: 1 }
  updateChild (value: any) {
    this.listOption = value
  }
}
</script>

<template>
  <div>
  	<button @click="update">update</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop } from 'vue-property-decorator'
import { CommonMixin } from '@/mixins/index'

@Component
export default class TsrListsComponent extends CommonMixin {
  @Prop({ type: Object }) option?: any

  update () {
    this.$emit('update:option', { b: 2 })
  }

  mounted () {
    console.log(this.listItem)
  }
}
</script>

 

 

 

VUE.JS 목록