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

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

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

步骤:

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

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值