本文介绍了一个简单的Vue.js应用中如何实现子组件通过自定义事件与父组件进行通信的例子。子组件触发事件，父组件接收并更新状态。
1.子组件
<template>
<div id="rightmenu7" >
<button @click="child1">子组件+</button>
</div>
</template>
<script>
export default {
name:"rightmenu7",
data(){
return{
}
},
methods:{
child1(){
this.$emit("child"); //自定义事件child
}
}
}
}
</script>
<style>
</style>
2.父组件
<template>
<div id="rightmenu8">
<rightmenu7 @child="parent3"></rightmenu7>//child自定义事件的方法 ,parent3父组件的方法
<span>{{age}}</span>
</div>
</template>
<script>
import rightmenu7 from "./RightMenu7.vue";
export default {
name: "rightmenu8",
data() {
return {
age:18
}
},
methods: {
parent3(){
this.age+=2;
}
},
components: {
rightmenu7: rightmenu7
}
};
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
