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

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

$ 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的な使われ方をするやつ)を作る
  • 第２引数に送信するデータを渡す
• 親コンポーネント内で子コンポーネントを呼び出す時に、作成したカスタムイベントを付与する
• $eventや引数で送信されたデータを受け取る