那么如何让子组件发生交互时会提醒父组件呢?可以通过自定义事件(这就是events up):
① 使用$emit(eventName)在子组件上触发事件
② 使用$on(eventName)在父组件上监听事件
简单来说就是我在子组件内部做了什么事情之后,告诉父组件一个状态,父组件接收到这个状态去做一些事情。
这里来看看我之前写的一个项目:
![](https://box.kancloud.cn/577ade795139f90a25e38d3cc0008c15_875x845.png)
因为需求基本都是围绕后台表单的,所以把Form表单和List列表抽象成大的模块,以表单为例,基本所有表单都有表单提交,所以
![](https://box.kancloud.cn/51413267655a7254181c7b783a16e8b2_976x304.png)
绑定一个通用方法,当点击提交会把当前的form表单数据提交,那么vue怎么接收表单数据呢?
![](https://box.kancloud.cn/41f5ce6c3839ad4a56ad2171b908aed3_750x422.png)
那么任意父组件就能通过监听这个onSubmit状态来做自己的事情了
~~~
<form-data :FieldList='fields' @onSubmit='onSubmit'></form-data>
<script>
export default {
...
methods: {
onSubmit(data) {
console.log(data) // 打印一下每个页面的表单数据看看吧!
}
}
}
</script>
~~~