微信小程序中，组件间如何实现信息传递及函数调用机制？

本文共计1130个文字，预计阅读时间需要5分钟。

这篇文章将基于我自身开发经验，从以下几个角度讲解相关内容：页面如何向组件传数据、组件如何向页面传数据、页面如何调用组件内的函数、组件如何调用页面内的函数。1. 页面如何向组件传数据

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

1. 页面如何向组件传数据
2. 组件如何向页面传数据
3. 页面如何调用组件内的函数
4. 组件如何调用页面内的函数
   

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

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

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

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

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

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

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

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

​ 同理，除了动态传值以外，这种方式也可以直接传入静态值，即不需要调用obeserver监听器。