propを使う

PROPを使う場面

propを使ってみたのでコードを残しておく。

propは親コンポーネントから子コンポーネントにデータを渡したい時に使われる。　 親コンポーネント内にコンポーネントを記述している場合書かれているコンポーネントを子コンポーネントという。

# 親コンポーネント
<template>
<div>
<p>これは親コンポーネント</p>
<SComponent/> # これが子コンポーネント
</div>
</template>

propは、この.vueファイル内でSComponentにデータを渡すことを前提とする。

propを使う際のイメージ

親コンポーネントでは子コンポーネントタグ内で変数を渡す。 子コンポーネントでは.ts内ではデータを受け取る変数名をプロパティとしてセットする。

サンプル

## 親コンポーネント

<template>
  <div class="home">
    <MyComponent />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import MyComponent from '@/components/MyComponent.vue'
@Component({
  components: {
    MyComponent,
  },
})
export default class Home extends Vue {
      private propForMyComponent = '親から渡されるプロパティ';
}
</script>

## 子コンポーネント MyComponent.vue
<template>
    <div>
        <p>これは子コンポーネントです。</p>
    </div>
</template>


<script lang='ts'>
import MyComponent from '@/components/MyComponent';
export default MyComponent
</script>

// MyComponent.ts

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({})
export default class MyComponent extends Vue{}

親コンポーネントではデータを子コンポーネントタグ内で渡す

## 親コンポーネント

<template>
  <div class="home">
    <MyComponent  :myProp='propForMyComponent'/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import MyComponent from '@/components/MyComponent.vue'
@Component({
  components: {
    MyComponent,
  },
})
export default class Home extends Vue {
      private propForMyComponent = '親から渡されるプロパティ';
}
</script>

子コンポーネントでは受け取る変数の名前をプロパティとしてセットする

## 子コンポーネント MyComponent.vue
<template>
    <div>
        <p>これは子コンポーネントです。</p>
    </div>
</template>


<script lang='ts'>
import MyComponent from '@/components/MyComponent';
export default MyComponent
</script>

// MyComponent.ts

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({})
export default class MyComponent extends Vue{
    @Prop()
    private myProp: string;

    public mounted() {
        console.warn(this.myProp);
    }
}