[Nuxt.js]nuxtでcomponentにデータを渡す時はpropで!

javascript

コロナで世の中大変ですね。通勤電車は人が少なくて、それだけはチョットいい感じです。。
早く落ち着いてほしいなぁ・・・

業務でnuxtやってますが、component間でデータを渡して変更したりするのにハマりました😇
答えとしては、propsを使って子コンポーネントに値を渡してあげればOKでした。

子で値を変更した場合も、親で渡した変数を参照すると変わっていました。

サンプル

サンプルコードを書いてみました。

親画面

<template>
  <v-row>
    <v-col cols="12">
      <h2>component test</h2>
    </v-col>
    <v-col cols="12">
      <Modal ref="testModal" :parentData="parentData"></Modal>
    </v-col>
    <v-col cols="12">
      <v-btn @click="showComponentData()">コンポーネントで入力したデータ</v-btn>
    </v-col>
  </v-row>
</template>
<script>
import Modal from '../components/Modal'
export default {
  components: {
    Modal,
  },
  data() {
    return {
      parentData: {}
    }
  },
  mounted (){
    this.parentData.testString = 'テスト引数文字列🐬';
    this.parentData.test2String = 'テスト引数二つ目🐬';
    this.parentData.test3String = '';
  },
  methods: {
    showComponentData() {
      alert(this.parentData.test3String);
    }
  }
}
</script>

子コンポーネント

Modal.vueの名前で、componentsフォルダに配置しています。

<template lang="pug">
  div
    div
      span ダイアログコンポーネント呼び出し元
    div
      v-dialog(v-model="dialog")
        v-card
          v-card-title ダイアログのタイトル!😃
          v-card-text
            div ダイアログ表示テスト
            div 親から渡したデータ1:[{{parentData.testString}}]
            div 親から渡したデータ2:[{{parentData.test2String}}]
          v-card-actions
            v-btn(color="primary" @click="dialog = false;") はい
            v-btn(color="green white--text" @click="dialog = false;") いいえ
    div.mb-2
      v-btn(color="primary" @click="showModal()") モーダル表示
    div
      v-text-field(v-model="addText" label="input text")
      v-btn(color="primary" @click="setParentData()") 親のデータ変更(*parentData.text3String)
</template>
<script>
export default {
  props: {
    parentData: Object
  },
  data() {
    return {
      dialog: false,
      addText: '',
    }
  },
  methods: {
    showModal() {
      this.$data.dialog = true;
    },
    setParentData() {
      this.parentData.test3String = this.addText;
    }
  }
}
</script>

やっていること

親画面

親画面では、modalコンポーネントをimportして、下記のタグで展開しています。

<Modal ref="testModal" :parentData="parentData"></Modal>

:parentDataをつけることで、コンポーネント内のデータにアクセスできます。(名前はなんでも大丈夫です😙)
この書き方 v-bind:parentData と同じで、v-bindを省略して書いています。

mountedメソッドで画面ロード時にコンポーネントに渡すデータを作っています。
渡すデータをコンポーネントにbindしておけば、いつ変更しても大丈夫そうです。

子コンポーネント

最初の下記の記述で、parentDataを受け取っています。
受け取った後は、this.parentDataみたいにthisを使ってアクセスしたり、内容を変更したりできます。

export default {
  props: {
    parentData: Object
  },

下記の箇所で、親から貰ったデータを表示するようにしています。

div 親から渡したデータ1:[{{parentData.testString}}]
div 親から渡したデータ2:[{{parentData.test2String}}]

親のデータ変更ボタンを押した時にsetParentDataメソッドで、入力されたテキストをparentData.test3Stringに格納しています。

typescriptを使っている場合

今回サンプルではtypescriptを使っていませんが、typeを使っている場合は
@Propデコレータを使って受け取る必要がありました。。type独特の書き方でハマってしまった…

今回の例で言えば下記のようになると思います。(詳細はリンク先参照)

  @Prop({ default: '' })
  parentData: object;

github

コメント

タイトルとURLをコピーしました