vue2组件通信中的一些拓展(props,emit,ref父子双向传参)

说明

我上一篇文章中基本对vue所有的数据通信方法进行了一个整理归纳。

其实我并没有像传统的那样去罗列,比如父传子有props,ref,子传父为emit,兄弟用$bus等等。

因为在我的实际练习和业务开发中,props,emit,ref等可以实现父子数据互传,这里就涉及一个比较重要的编程思维,函数式编程。

当我们使用props传递一个函数呢,那么子组件调用这个函数时,将参数传入这个函数的调用,那么在父组件中定义的函数不就可以直接获取到了子组件中数据了吗。

其余的两个也是同理,记住,传参有两种,一种是常规变量,一种是函数,传递什么决定了你的功能。

看代码:

props实现父子双向传参:

父组件

子组件

$emit实现父子双向传参

父组件

子组件

$ref实现父子双向传参

父组件

子组件

结束语

虽然在开发中,大部分人都会按照既定思维,props和ref父传子,emit子传父,但是我们是开发者,需要有更多的思维在里面,你可以不用,但是你需要去思考,去尝试。

vue和react等框架本身就大量使用了函数式编程的思想,作为使用者的我们,也要同样的将这种思想运用进去,才会有更多优质的代码,才回提升自己。