微信小程序页面与组件之间信息传递与函数调用

2023-05-19 原文

这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容

页面如何向组件传数据
组件如何向页面传数据
页面如何调用组件内的函数
组件如何调用页面内的函数

1.页面如何向组件传数据

最常用，最规范的方式，设置数据监听器observer。

假设在页面内引入了组件sc

"usingComponents": {
    "sc":""
 }

想要配置一个监听器用来监听页面中数据list的变化，组件在页面中的写法如下：

<sc
list="{{list}}"
>
</sc>

组件中的监听器写法如下，当页面中的`list`值每次发生变化，都会触发`observer`监听器，打印出变化值。

properties: {
    list:{
      type:Array,
      observer: function (newVal, oldVal){
        console.log(newVal)
      }
    }
}

同理，除了动态传值以外，这种方式也可以直接传入静态值，即不需要调用obeserver监听器。在组件中可以直接使用this.properties.*来获取properties中的各个值(*代表各个属性值的名称)。

2.组件如何向页面传数据

既然组件可以设置监听器用来监听页面数据变化，用来达到数据传递的效果，页面同样可以使用监听器，来监听组件触发的信息传送。

仍然以上面的组件为例，如何向页面中传送信息？

在页面中配置组件监听器

ComponentListener(e){
    let info = e.detail;
 }

组件选择事件并绑定该监听器

<sc
bind:listener="ComponentListener"
> 
</sc>

从组件中往页面传入输入只需要在组件中触发对应事件，e.detail就是传过去的数据

 this.triggerEvent('listener',{func,tid});

3.页面如何调用组件内的函数

假设我们引入并使用了一个组件comment-bottom，组件内有函数handleCloseInput，需要在某个逻辑中触发。

想要使用组件内的函数，必须为组件配置一个唯一id，这样就可以在页面中通过dom操作选中组件并调用组件中的函数。

<comment-bottom id="commentBottom"></comment-bottom>

组件中的函数在页面中的调用逻辑如下：

this.commentBottom = this.selectComponent("#commentBottom");
this.commentBottom.handleCloseInput();

4.组件如何调用页面内的函数

上面向页面传数据的方式，实际上就是调用了页面中的函数。我们可以这样理解该逻辑，将该用法理解为一个函数映射。

<component bind:componentfunc="pagefun"></component>

当使用trigger触发componentfunc时，通过bind:这个函数映射关系，就会触发页面中的pagefunc。

其次，调用页面内的函数，还可以通过页面栈的方式，组件并不占用页面的栈空间，因此在组件中使用getCurrentPages就可以获得对应页面的数据和方法。

var allpages = getCurrentPages();//获取全部页面数据
var nowpage = allpages[allpages.length - 1].data;//获取当前页面的数据。
var nowpage = allpages[allpages.length - 1];//获取页面，包括数据和方法

这部分内容出自我的一篇文章，我会把地址放在参考文件中。

结语：

组件和组件之间的数据传递和组件与页面之间并没有太大区别，组件中也可以嵌套组件。

参考文件

微信小程序开发技巧总结（一）-- 数据传递和存储

到此这篇关于微信小程序页面与组件之间信息传递与函数调用的文章就介绍到这了,更多相关微信小程序页面与组件内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！