vue 移动端 导航上关闭弹出层的实现,并且利用ref 的原理实现内部的状态回归false

效果图:

 ref 的原理:ref除了可以获取本页面的dom元素,还可以拿到子组件中的data和去调用子组件中的方法

  思路:  在导航栏上的X icon 图标上,去绑定一个事件!!!在methods 方法里通过子传父的方法this.$emit 的方法,绑定事件,在父组件里绑定事件;还有绑定一个ref 的绑定,在methods 的方法里完成即可!!!

1.在导航栏上的icon 图标上绑定事件

2.在methods的方法里 使用this.$emit 的方法绑定一个自定义事件

3. 在父组件里,进行绑定事件,顺便绑定一个ref

4. 在methods方法里直接使用即可!

//关闭弹出层
closeFN(){
  this.show=false
  //我要内部的状态回归false
  this.$refs.editRef.isEdit=false


}

  },

猜你喜欢

转载自blog.csdn.net/weixin_59519449/article/details/124119729