Help us understand the problem. What is going on with this article?

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

やりたいこと

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は引数を2つとります。1つ目は好きに名前を付けてください。
 (後ほど親コンポーネント内で使用します)
・2つ目は、親コンポーネントへ渡したいデータを指定します。今回は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の第1引数をとります。
$eventには、子コンポーネント内のthis.$emitの第2引数である、データが入ります。

これで、親コンポーネント 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)へ渡りました。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした