Vueで親から子へ値(変数)の受け渡し(TypeScript)

公式ドキュメントに書いてはあるんだけど微妙に分かりづらかった

親(呼び出し側の記述)

index.ts

import Vue from "vue"
import childComponent from "./components/child.vue"
 
const v = new Vue({
  el: "#app",
  components: {
    childComponent,
  },
  data() {
    return {
      parentValue: "test",
    }
  },
  methods: {
    //
  },
})

index.html(抜粋)

<div id="app">
  <child-component>( v-bind:child-value="parentValue" )
</div>

上記は動的に親のプロパティを受け渡すケース。
直値の場合child-value="test"のように書く。
child-value ⇔ childValue(子コンポーネントのプロパティ) に変換される。

子コンポーネントの記述

<template>
  <div>
    <!--  -->
  </div>
</template>
 
<script lang="ts">
import Vue from "vue"
 
export default Vue.extend({
  props: {
    childValue: String,
  },
  data() {
    return {
      //
    }
  },
  /** Vue構築完了時の処理 */
  created: function init() {
    console.log(this.childValue)
  },
 
  methods: {
    //
  },
})
</script>

props: {
    childValue: String,
  },

に親から受け取った値が入ってくる

参考

https://jp.vuejs.org/v2/guide/components.html

Vueで子から親へのコールバック形式による値受け渡し (TypeScript) も一緒に見ておくといいかと

Vueで親から子へ値(変数)の受け渡し(TypeScript)

親(呼び出し側の記述)

子コンポーネントの記述

参考

2018年4月23日月曜日