Vue中父组件如何控制子组件显示与隐藏
//父组件中import fireDetailsDialog from "./fireDetailsDialog.vue";<!-- 火情详情弹框 --><fire-details-dialog:fireData="fireData":panelShow.sync="panelShow"></fire-details-dialog>在父组件data中定义一个pa
·
//父组件中
import fireDetailsDialog from "./fireDetailsDialog.vue";
<!-- 火情详情弹框 -->
<fire-details-dialog
:fireData="fireData"
:panelShow.sync="panelShow"
></fire-details-dialog>
在父组件data中定义一个panelShow属性默认值为flse,当点击某个按钮的时候,让panelShow为true,子组件中通过props来获取父组件中传递的panelShow,绑定v-show来显示和隐藏,在组件中点击关闭按钮,通过 this.$emit('updata:panelShow',false);来更新父组件中panelShow,代码如下:
oncloseClick() {
this.$emit('update:panelShow', false) //弹框隐藏,意为panelShow为false
},
更多推荐
已为社区贡献1条内容
所有评论(0)