小程序-4(自定义组件:数据、属性、数据监听器、生命周期函数、插槽、父子通信、behaviors)-5.父子组件之间的通信

三种方式

属性绑定

实现父向子传递数据

在home.wxml中放置一个view,引入count,并在其js文件中,将count值赋值为0;在子组件中的wxml文件中写一个view标签,将count值放进去,在test5.js文件中接收count,一旦接收到就会实现数据通信

home.wxml

test5.wxml

test5.js

实现效果

事件绑定

利用自定义事件实现子向父传递数据

在子组件中的按钮绑定了一个addCount函数,每点击一次实现自增加一;现在在触发按钮时,将数据传递给父组件,让父组件也共享数据

在子组件的.js文件中使用this.triggerEvent('自定义事件名',数据)   value在此处赋值  this.data=this.properties

在父组件的.js文件中,通过e.detail获取到子组件传递过来的数据

使用selectComponent获取组件实例

在父组件的wxml文件中给子组件定义一个类选择器或者id选择器,设置一个按钮绑定获取子组件数据的事件函数

在子组件的.js文件中调用按钮的绑定事件函数,其中命名新值接收子组件的数据,就是在此处用到了selectComponent, 具体写法:const child=this.selectComponent(类选择器或者id选择器),之后想获得子组件的数据有两种方法,第一种:使用setData方法,重新定义count的数值(注意在此处,不能使用this,this指的是当前页面,放在这里不合适);第二种:直接调用子组件的addCount方法

相比之下,第二种方法更简单,第一种方法相当于是重新定义数据,给数据赋值

注意selectComponent的用法,后面的括号中放的是类选择器名(.类选择器名)或者id选择器(#id选择器名)

上一篇:20240718每日后端------------kafka VS RabbitMQ:选择正确的消息代理


下一篇:x264 写入码流函数分析与介绍