Vue中利用$emit实现子组件向父组件通信
父组件
<template>
<div>
<p>我是父组件</p>
<child :isShow="show" @hidechild="hidechild"></child>
<button @click="show=true">显示子组件</button>
</div>
</template>
<script>
import child from "./child"
export default {
date(){
return{
show:false
}
},
components:{
child
},
methods:{
hidechild:function () {
this.show=false
}
}
}
</script>
子组件
<template>
<div>
<h2 v-show="isShow">我是子组件</h2>
<button @click="hideMyself()">隐藏子组件</button>
</div>
</template>
<script>
export default {
name:"child",
props:{
isShow:Boolean
},
methods:{
hideMyself:function () {
this.$emit('hidechild');
//通过调用父组件的方法改变props中参数的内容
//$emit(eventname,args); 可以携带参数
}
}
}
</script>
