vue 中 $emit的使用
作用:子组件想要控制到父组件的状态。场景:有些复杂的交互,就不得不自制弹窗(造轮子),需求:点击蒙板或者关闭按钮就能够关闭,子组件是一个弹窗,父组件中控制弹窗的出现和消失,同时又想在子组件中关闭弹窗,而不对父组件的交互产生任何影响。方法一:全局变量去控制弹窗是否出现or关闭方法二:使用$emit传递父组件中写好的方法。关闭弹窗的操作在父组件进行如下边的closed,当触发子组件的时候,...
·
也可以参考官网的:vm-emit
作用:子组件想要调用到父组件的方法。
使用$emit触发父组件中写好的方法。
标识 :
如,父组件中使用子组件IndexFrom,并向子组件传递一个叫closed的方法:
<IndexFrom v-on:closed="closed" if="online"></IndexFrom>
这个方法写在父组件中:
closed() {
this.online = false;
},
在子组件中调用:
当点击关闭的时候,触发父组件中定义的方法。
<div class="mask" @click="close">关闭</div>
子组件中定义的方法:其中 this.$emit("closed");中的closed是父组件方法的别名,可自取。
close() {
this.$emit("closed");
},
更多推荐
已为社区贡献6条内容
所有评论(0)