通过在子组件中自定义事件,并将事件信息发送回父组件就可以实现子组件向父组件通信。
例如,在点击按钮时向父组件发送age递增的事件,在父组件层面进行age++,再自动同步到子组件:
<script>
export default {
name: 'app',
props: ['age'],
methods: {
onClickAge() {
this.$emit('incrementAge')
} }}
</script>
<template>
<div>
<button @click="onClickAge">Increment Age</button>
<p>{{age}}</p>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
data() {
return {
age: 10
}
}}
</script>
<template>
<HelloWorld :age="age" @incrementAge="age++"/>
</template>