微客导航 » 文章资讯 » vue父子组件通信的高级用法示例

vue父子组件通信的高级用法示例

2023-08-15 16:54:05 158

前言

vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率，减少代码量。但是使用组件最大的难点就是父子组件之间的通信。

子通信父

父组件

子组件

子组件使用$emit方法调用父组件的方法，达到子通信父的目的。

父通信子

父组件

子组件

父组件通过$refs调用子组件的方法。

以上就是父子组件通信的方式，父子组件传递数据直接用props，或者使用$emit和$refs依靠事件来传递数据。

父子组件通信提升篇

上文中，子通信父是在子中触发点击事件然后调用父组件的方法，父通信子是在父中触发点击事件调用子组件的方法。但是实际情况中可能存在子通信父时子组件不允许有点击事件而事件在父中或者父通信子时点击事件在子组件中。

子通信父时击事件在父组件

这种情况其实很常见，例如提交一个表单时表单的内容为子组件，而保存按钮在父组件上。此时点击保存按钮想要获取子组件表单的值。这种情况下已经不单单是子通信父和父通信子了，需要将两者结合在一起使用才能完成整个通信过程。

实现的思路是在父组件中点击事件时，先通过父子通信调用子组件的方法，然后在子组件中的该方法里使用子父通信调用父组件的另一个方法并将信息传递回来。以下是代码演示：

父组件

子组件

另一种情况思路也和这个一样，基础就在与父通信子和子通信父的灵活运用。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对毛票票的支持。