michaal in thiessen の説明、子供に渡す方法

Data はプライベートで、なんでもストアできるところ

Props は data を親コンポーネントから子供コンポーネントに渡す「方法」

と書いてある。

<HelloWorld coolProp="coolprop"/>

のように継承するのは React と同じのようだ。

こうやって渡すととりあえずエラーは出ない。

呼び出し

そこの中身なら data も props も呼び出せるようだ

このサンプルを見ると

export default {
  props: ['secret'],
  data() {
    return {
      secret: '1234',
    };
  },
  methods: {
    printSecret() {
      // Which one do we want?
      console.log(this.secret);
    }
  }
};

このようにメソッドで呼び出す方法をとっているのを確認した。

Vuetify のサンプルコードを見る

Vuetify のデフォルトで生成されたコンポーネントの export しているところを見てみると

<script>
  export default {
    name: 'HelloWorld',

    data: () => ({
      message: 'How is you job status?',
      jobStatus: 'your status is ...',
      jobItems: ['never change', 'changing', 'changed recently'],
    })
  }
</script>

name として文字列が入っている

これが props のことだった！

Vuetify の prop がコンポーネントのダブルブラケットで出ない

これらをこのコンポーネント中で呼び出してみると

<v-row justify="center">
  {{message}}
</v-row>
<v-row justify="center">
    {{this.name}}
</v-row>

f:id:kei_s_lifehack:20210716104503p:plain

data に入れた message は出るが、

props に入れた name は出ずに、エラーになってしまう。

prop が描画できないエラー文を読む

vue.runtime.esm.js?2b0e:619 [Vue warn]: 
Property or method "name" is not defined on the instance 
but referenced during render. 
Make sure that this property is reactive, 
either in the data option, or for class-based components, 
by initializing the property. 

See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <HelloWorld> at src/components/HelloWorld.vue

name プロパティがインスタンスで定義されたが、レンダー中に参照されている。

プロパティがリアクティブでデータオプションかクラスベースのコンポーネントなのか、初期化することで確かめろ。

とある。

method で呼び出さないとうまく固定できないってことだろうか？

それを試してみる

method で console.log で prop を呼び出してみる

    methods: {
      printProp() {
        // Which one do we want?
        console.log(this.name);
      }
    },

method に this から prop である name を呼び出す関数を入れたが

どこで呼び出すのかわかってない

watch での監視を組もうとしたが、prop は監視対象に組もうとすると VScode でエラーが出る。

    watch: {
      jobStatus: function(newValue){
        console.log(newValue);
        if (newValue === 'changing') {
          this.message = 'Good Luck for the Job Interview!'         
        }
        console.log(this.name);
      }

前回作った jobStatus の watcher で仕組んで prop の this.name を出してみると