父子组件通信的实例

37 篇文章 1 订阅
36 篇文章 1 订阅

平时老是听说通信方式,经过这几天的实际操作也明白了一些怎么操作的情况,下面就引入一个实例进行操作后面会的方法更多了后也会更新更多的实例操作如果有错的地方还望大佬指正:

先看主角这几个页面

一共两个页面使用uni-popup弹窗,通过获取uni-popup弹窗的close关闭方法从而点击确定和叉叉图片都能关闭弹窗

                                             uniapp官方弹窗组件uni-popup

先是个叉叉图片设置一个点击事件通过

使用$refs访问ref属性注册的组件或者DOM元素的引用,因为uni-popup的ref属性是popup所以

叉叉图片的点击事件就是可以通过$refs.popup.close()来访问close方法,这样就可以点击叉叉图片从而退出弹窗了,这个实例中uni-popup时子组件,,父组件通过$refs.popup.close()的方式访问子组件实例。

 通过`ref`引用:


   - 父组件可以通过`ref`属性获取子组件实例的引用。
   - 父组件通过`this.$refs.xxx`的方式访问子组件实例,其中`xxx`是在子组件的模板中通过`ref`属性指定的名字。

接下来就是通过点击确定按钮然后获取close方法来退出弹窗

其实按道理还是上面的那个方法但是由于弹窗内部的样式我用了自定义组件(tapmoney)来显示所以要把close方法传入到tapmoney中就多了一个步骤将close方法放入自己定义的方法handleClose中

将$refs.popup.close()的值传入<tapmoney>中

在<tapmoney>中在确定按钮中加入点击事件confirm()

$emit

在methods:中写入confirm()this.$emit来获取close的数据,通过子组件<tapmoney> 通过$emit方法触发自定义事件,并将需要传递给父组件的数据(close)作为参数传递给该(确定按钮)事件

这就是一个很实际的一个父子通信方式的一个·实例,以后遇到感觉很有记录的通信事件也会继续跟新。。。。。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值