LoginSignup
125

More than 3 years have passed since last update.

propsと$emitでデータを引き渡す

Last updated at Posted at 2020-04-09

コンポーネント間の基本的なデータの受け渡し方法をまとめます。

$ vue create learn-props-emit
$ cd learn-props-emit
$ npm run serve
$ touch src/components/Child.vue

props

親→子に値を渡す時にはpropを使います。

src/components/Child.vue
<template>
  <div>
    <p>{{ greet }}</p>
  </div>
</template>

<script>
export default {
  props: {
    greet: {
     type: String,
     default: 'hogehoge'
    }
  }
}
</script>
src/App.vue
<template>
  <div>
    <h1>Hello from App.vue</h1>
    <Child greet='Hello with props'/>
  </div>
</template>

<script>
import Child from './components/Child.vue'
export default {
  components: {
    Child
  }
}
</script>

ポイント

  • 子コンポーネント内にpropsという属性を定義し、propの名前と型を定義する
  • 親コンポーネント内で子コンポーネントを使う時に、prop名と値を受け渡す

$emit

子→親に値を渡す時には$emitを使います。結構めんどいです。

src/components/Child.vue
<template>
  <div>
    <p>child_num: {{ child_num }}</p>
    <button @click='send'>親に値を渡す</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      child_num: 0
    };
  },
  methods: {
    send() {
      this.$emit("my-click", this.child_num);
    }
  }
};
</script>
src/App.vue
# パターン1:受け取った値をそのまま使う場合は$eventで受け取る
<template>
  <div>
    <h1>Hello from App.vue</h1>
    <p>parent_num: {{ parent_num }}</p>
    <Child @my-click='parent_num = $event'/>
  </div>
</template>

<script>
import Child from './components/Child.vue'
export default {
  data: function() {
    return {
      parent_num: 100
    }
  },
  components: {
    Child
  }
}
</script>
src/App.vue
# パターン2. 受け取った値を関数で使う場合は、適当な変数(value)を定義するとそこに値が入る
<template>
  <div>
    <h1>Hello from App.vue</h1>
    <p>parent_num: {{ parent_num }}</p>
    <Child @my-click='reflectNum'/>
  </div>
</template>

<script>
import Child from './components/Child.vue'
export default {
  data: function() {
    return {
      parent_num: 100
    }
  },
  components: {
    Child
  },
  methods: {
    reflectNum(value) {
      this.parent_num = value
    }
  }
}
</script>

ポイント

  • 子コンポーネント内で、$emitでカスタムイベント(clickとかchange的な使われ方をするやつ)を作る
    • 第2引数に送信するデータを渡す
  • 親コンポーネント内で子コンポーネントを呼び出す時に、作成したカスタムイベントを付与する
  • $eventや引数で送信されたデータを受け取る

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
125