平时老是听说通信方式,经过这几天的实际操作也明白了一些怎么操作的情况,下面就引入一个实例进行操作后面会的方法更多了后也会更新更多的实例操作如果有错的地方还望大佬指正:
先看主角这几个页面
一共两个页面使用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)作为参数传递给该(确定按钮)事件
这就是一个很实际的一个父子通信方式的一个·实例,以后遇到感觉很有记录的通信事件也会继续跟新。。。。。