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>