Vue.js　親・子　コンポーネント間　データ　受け渡し

3808 ワード
Vue.js JavaScript vue-cli 初心者 JavaScript テキストリンク

やりたいこと

Vue.js (Vue CLI)で、親・子コンポーネント間でデータを受け渡したい。

今回は以下のような流れでデータを受け渡します。
child1.vue(子1)　→　pearent.vue（親）　→　child2.vue（子2）

child1.vue(子1)　→　pearent.vue（親）、子から親へデータを移動

今回は、ボタンを押すとinputに記載された文字列を親コンポーネントに渡す処理を実装します。

まずchild1.vue(子1)

<template>
    <div id="target-input">
        <p>以下input内に入力されたデータを親に渡します</p>
        <input type="text" @input="example = $event.target.value">
        <button @click="sendToParent">親へデータを渡す</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            example : "",
        }
    },
    methods: {
        sendToParent() {
             this.$emit("textForParent",this.example);
        }
    },
};
</script>

ポイント
・methods内、this.$emitは引数を２つとります。１つ目は好きに名前を付けてください。
　（後ほど親コンポーネント内で使用します）
・２つ目は、親コンポーネントへ渡したいデータを指定します。今回はdata内のexampleです。

上記で「送り口」の実装は完成です。

しかしこのままでは「受け取り口」が用意されていない為、データが親コンポーネントへ渡りません。
受け取り側であるpearent.vue（親）に、「受け取り口」を実装していきます。
pearent.vue（親）

<template>
  <div id="app">
    <child1 v-on:textForParent="text = $event"></child1>
    <child2></child2>
  </div>
</template>

<script>
import child1 from './child1.vue'
import child2 from './child2.vue'

export default {
  name: 'App',
  components: {
    child1,
    child2,
  },
  data(){
    return {
      text : "",
    }
  },
};
</script>

ポイント
・v-onディレクティブの後に、子コンポーネント内で設定したthis.$emitの第１引数をとります。
・$eventには、子コンポーネント内のthis.$emitの第２引数である、データが入ります。

これで、親コンポーネント data内のtextへ、子コンポーネントからデータを渡すことが出来ました。

pearent.vue（親）　→　child2.vue(子2)　、親から子へデータを移動

では今度は親コンポーネントから子コンポーネントへデータを移動してみましょう。
先ほどのtextを、child2.vueへ渡してみます。

pearent.vue（親）

<template>
  <div id="app">
    <child1 v-on:textForParent="text = $event"></child1>
    <child2 v-bind:textForChild2="text"></child2>
  </div>
</template>

<script>
import child1 from './child1.vue'
import child2 from './child2.vue'

export default {
  name: 'App',
  components: {
    child1,
    child2,
  },
  data(){
    return {
      text : "",  //実際には、child1からのデータが入っています
    }
  },
};
</script>

ポイント
・<child2></child2>にv-bindを付けてあげます。textのデータを子に送ります。
上記で「送り口」はできました。

今度はchild2.vue(子2)に「受け取り口」を作ります。
child2.vue(子2)

<template>
    <div>
        <p>以下に親コンポーネントから渡されたtextデータを表示します。</p>
        <p>{{textForChild2}}</p>
    </div>
</template>>

<script>
export default {
    props:["textForChild2"],
};
</script>

ポイント
・propsを設定して親コンポーネントからデータを受け取ります。これをtemplate内で呼び出します。

以上です！
今回の例ではchild1.vue(子1)内で作られたデータがpearent.vue（親）へ渡り、そこからchild2.vue(子2)へ渡りました。

子から親へ、親から子へデータを受け渡しすることが出来ました！

Python関数と変数の役割ドメイン
最小二乗法直線フィットのC言語とmatlab実現