vue:親→子/子→親 データやりとり方法 まとめ

vueの「親→子」/「子→親」のデータやりとり方法について、まとめました！

これがわかったお陰で、vueファイルを親子で分割することができました。

親→子へデータを渡す

親→子へデータを渡す方法です。

親vue

「toChildMsg」という変数を「msg」という名称で、子へ渡しています。

// 親
<template>
  <div id="app">
    <h2>親子間</h2>
    <Child :msg="toChildMsg" />
  </div>
</template>

<script>
import Child from './components/Child'

export default {
  name: 'App',
  components: {
    Child,
  },
  data() {
    return {
      toChildMsg: "parent message!",
    }
  },
}
</script>

子vue

親から受ける「msg」を、scriptの「props」という要素に記述します。

ここで渡された変数は、子としても変数として取り扱えるので「{{ msg }}」で表示するなどが可能です。

// 子
<template>
  <div>
    <h3>Child</h3>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: ["msg"],
};
</script>

子→親へデータを渡す

子→親へデータを渡す方法です。

親vue

「parentFunc」という名称で、親に実装されているコールしてほしい関数名を渡します。

今回の場合、「parentFunc」という名称を子に教えて、実際は「updateChildMsg()」が紐付いています。

updateChildMsg()では、引数を設定して、子から値を渡せるようにしてみました。

引数部分は勝手に変えてOKなので、値を渡す必要がなければ「引数なし」にすればOKです。

// 親
<template>
  <div id="app">
    <h2>親子間</h2>
    <Child @parentFunc="updateChildMsg" />
    <p>{{ fromChildMsg }}</p>
  </div>
</template>

<script>
import Child from './components/Child'

export default {
  name: 'App',
  components: {
    Child,
  },
  data() {
    return {
      fromChildMsg: "",
    }
  },
  methods: {
    updateChildMsg(msg) {
      this.fromChildMsg = msg;
    }
  }
}
</script>

子vue

子はメソッド内で「this.$emit()」を行うことで、親メソッドをコールしてやり取りします。

今回はボタンが押されると「onClickButton()」が実行され、「this.$emit()」で「parentFunc」を指定しています。

子→親の流れはこんなイメージ。

1. 子: this.$emitで「parentFunc」が指定される
2. 親: 「parentFunc実行してね！」と言われる
3. 親: parentFuncに紐付いているものは？→「updateChildMsgだ！」
4. 親: updateChildMsg()を実行する

今回の場合、テキストボックスに入力された値を引数で渡しています。

なので、親のupdateChildMsg()の引数「msg」に「this.inputText」の値が渡されて処理されます。

// 子
<template>
  <div>
    <input type="text" name="input" v-model="inputText">
    <button @click="onClickButton">click</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  data() {
    return {
      inputText: "",
    };
  },
  methods: {
    onClickButton(event) {
      this.$emit('parentFunc', this.inputText);
    },
  },
};
</script>

両方入れれば相互にやり取りできる

親→子、子→親は両方入れれば、どちらも機能させる事ができます。

親vue

<template>
  <div id="app">
    <h2>親子間</h2>
    <Child :msg="toChildMsg" @parentFunc="updateChildMsg" />
  </div>
</template>

<script>
import Child from './components/Child'

export default {
  name: 'App',
  components: {
    Child,
  },
  props: ["msg"],
  data() {
    return {
      inputText: "",
      toChildMsg: "parent message!",
    }
  },
}
</script>

子vue

// 子
<template>
  <div>
    <h3>Child</h3>
    <p>{{ msg }}</p>
    <input type="text" name="input" v-model="inputText">
    <button @click="onClickButton">click</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  props: ["msg"],
  data() {
    return {
      inputText: "",
    };
  },
  methods: {
    onClickButton(event) {
      this.$emit('parentFunc', this.inputText);
    },
  },
};
</script>

複数変数を取り扱う

複数設定すれば、複数取り扱うこともできます。

親vue

これで

• var1を「group」という名称で渡す
• var2を「name」という名称で渡す

ということができます。

<template>
  <div id="app">
    <Child :group="var1" :name="var2" />
  </div>
</template>

子vue

親から渡された「group」と「name」をpropsに設定します。

だからpropsは配列なんですね。

<script>
export default {
  name: "Child",
  props: ["group", "name"],
};
</script>

参考

コチラを参考にしました。ありがとうございました！

dev83.com

qiita.com

あとがき

vueの「親→子」/「子→親」のデータやりとりの方法でした！

この内容と今までのことで、それっぽいものがとりあえず作れそうですね！