Vue教程之子组件向父组件传值

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送信息。

每个 Vue 实例都实现了事件接口：使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在子组件上直接用v-on来监听子组件触发的事件。

子组件向父组件传值实例演示。

父组件

<template>
  <div>
    <Demo5 @add="handleAdd"></Demo5>
    <Demo5 @add="handleAdd"></Demo5>
    <h1>{{ count }}</h1>
  </div>
</template>

<script>
import Demo5 from './components/Demo5'
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    handleAdd (value) {
      this.count += value
    }
  },
  components: {
    Demo5
  }
}
</script>

子组件

<template>
  <div>
    <h1 @click="handleClick">{{ number }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      number: 0
    }
  },
  methods: {
    handleClick () {
      this.number += 3
      this.$emit('add', 3)
    }
  }
}
</script>