vue中子组件向父组件传递消息

核心方法

vm.$emit()

当子组件中调用vm.$emit('event-name','message')时，父组件就可以监听event-name事件并接收到message信息。

example

子组件

<template>
  <div @click="sendMessage">
  </div>
</template>
<script>
  export default {
    methods: {
      sendMessage() {
         //...
         this.$emit('child-event','this is message');
      }
    }
  }
</script>

父组件

<template>
  <div>
    <child-component @child-message="handleMessage">
    </child-component>
  </div>
</template>
<script>
  import child from 'child-component';
  export default {
    methods: {
      handleMessage(message) {
         //...
         console.log(message);
      }
    },
    components: {
       'child-component': child
    }
  }
</script>