vue组件中的父子组件之间的通信----(以一个弹出框封装的子组件为例)

问题:使用vue框架进行开发,UI使用ElementUI,遇到需要将一个弹出框中的内容整个做成一个组件来实现复用。

解决思路

将这个弹出框做成一个组件,弹出框的标题这里使用父组件向子组件传递。然后将在弹出框中选中的数据返回到父组件,这里涉及到子组件向父组件传值。

步骤:

一、父组件向子组件通信
首先在子组件中写好需要父组件传递的参数
在这里插入图片描述
这里可以直接将子组件弹出框的标题赋值为title,titleDataSys是子组件弹出框的标题。
在这里插入图片描述
然后编写子组件弹出框的展示函数
在这里插入图片描述
到这里子组件的准备工作就结束了,接下来就是父组件使用子组件并传一个title的值。
在父组件中使用构造该组件
在这里插入图片描述
在template中引用该组件
在这里插入图片描述
这里一定要写ref属性,然后在点击弹出框的函数中调用子组件的展示函数来打开弹出框(子组件),这样就打开了。
在这里插入图片描述
这里要注意,show方法是子组件的,父组件通过reds来调用子组件的函数,如果子组件没有该函数,控制台会报函数不存在错误

二、子组件向父组件通信
在子组件弹出框中有数据要传给父组件时,通过$emit返回数据。比如,我在弹出框中选中了一些数据,然后要返回给父组件,可以在弹出框的按钮函数中返回。
在这里插入图片描述
childFn相当于是一个自定义函数,在父节点中可以通过@childFn进行使用。
在这里插入图片描述
在parentFn(随便定义的)函数中取出数据
在这里插入图片描述
这样子组件的数据就到父组件中了。

声明:本人新手程序猿,这里博客都是在开发学习过程中遇到问题的自我总结,仅供参考!

猜你喜欢

转载自blog.csdn.net/Wangdiankun/article/details/109207611
今日推荐