vue 子元素请求父元素处理,并等待后续处理的三种方法

23 阅读1分钟

场景

子元素向父元素触发了一个请求的事件, 由父元素进行网络请求,并返回结果,子元素等待并进行后续处理

效果

动画.gif

方法1. callback

子元素的后续处理就是,修改button里面的msg, 并设置err image.png 于是将后续的操作放到$emit里面作为参数,等待父元素进行调用,当父元素计时器完成, 触发callback

方法2. $liseeners

$listeners 用来获取父元素的传来的所有事件函数

<!-- 父组件 -->
<Child @event1="handleEvent1" @event2="handleEvent2" />

// 子组件
this.$listeners // { event1: handleEvent1, event2: handleEvent2 }

image.png

如图: 父元素传来了一个事件处理函数click事件的处理函数 handleClick,子元素通过$listeners.click执行,并获取返回结果进行后续处理.

方法3. props

使用props 获得父元素传来的函数, image.png