微信小程序如何实现双向数据绑定(微信小程序的双向数据绑定)

原生小程序开发中，数据流是单向的，不能双向绑定，但是实现双向绑定的功能还是挺简单的！

下面是小程序框架minapp中实现双向绑定的原理。在minapp中，你只需要添加。同步到wxml模板中组件的属性名，实现双向绑定。为了解释它的原理，过程可能会复杂一点，但实际上minapp框架已经处理了那些复杂的细节！

首先，要双向绑定数据，要避免数据源过多。在数据自上而下自然流动的条件下，如果每个组件都维护自己的数据，同时保持它们的数据值一致，这是可以做到的，但实现过程不会简单。但是没有必要为了有一个统一的数据源而使用mobx或redux来全局管理数据。有点像拿刀杀鸡。因为双向绑定只存在于父组件与子组件之间，数据是从父组件传递到子组件的，所以可以先把父组件中的数据作为数据源。子组件每更新一次自己的数据，就通过一个事件机制触发父组件更新自己的数据，父组件更新完自己的数据后自然会把更新的数据传给子组件，这样就实现了数据的双向流动！

不是所有的数据都需要双向绑定，也不是所有的数据都是外部的。子组件也可以有自己的内部数据。所以这就涉及到我们要讲的第二个问题:区分哪些数据需要双向绑定，哪些数据需要子组件自己维护。

用过vue的人都应该知道，要在vue中实现双向绑定，需要在模板中做特殊处理。例如，要将父组件的parentAttr双向绑定到子组件的childAttr，您需要在父组件的模板中编写以下内容:

ltchild childAttr.sync = parentAttr / gt；而小程序没有这么简单的语法，甚至连小程序的wxml语言的属性名都不允许出现”。"这样的人物。让我们回到我们的问题。子组件需要知道哪些属性需要双向绑定，哪些属性需要自己维护。只需在模板中添加一个字段(syncAttrMap)来告诉子组件需要双向绑定的数据集。比如上面的例子，可以用微信小程序支持的方式来写:

ltchildAttr = { { parentAttr } } syncAttrMap = childAttr = parentAttr / gt； lt！--如果同时存在多个双向绑定和不需要双向绑定的属性，可以这样写:P1 p1，p2分别双向绑定到子组件的C1 c1，c2，而p3单向绑定到c3。-->: lt；子c1 = { { p1 } } c2 = { { p2 } } c3 = { { p3 } } syncAttrMap = c1 = p1 c2 = p2 / gt；然后，需要处理子组件的数据更新问题。子组件中有两部分数据，一部分是内部数据，另一部分是父组件中的数据。子组件通过读取属性syncAttrMap，可以得到哪些数据是内部数据，哪些数据是父组件的数据，知道父组件中对应数据的键名是什么。因为原生组件方法setData不管你是内部数据还是父组件中的数据，只要你调用它更新数据，它只会更新内部数据。所以需要实现一种新的方法来自动判断数据源，如果是内部数据，直接调用setdata如果它是双向绑定中的父组件数据，您可以触发一个事件来通知父组件更新相应的值。

所以根据上面的描述，父组件需要有监听功能，子组件需要有智能setData功能。您可以使用以下代码，而不是将父组件的监视器函数命名为onSyncAttrUpdate，将子组件的智能setData函数命名为setDataSmart:

//父组件({ methods:{ onsyncattrupdate(e){ this . setdata(e . detail)//要从子组件更新的数据}})<！--父组件--的模板: ltchildAttr = { { parentAttr } } syncAttrMap = childAttr = parentAttr bind:syncAttrUpdate = ；onSyncAttrUpdate / gt；//子组件component({ properties:{ child attr:string，syncattrmap: string}，methods:{//子组件更新数据时，调用此方法即可，而不是` setdata ` setdata smart(data){//SplitDataBySyncAttrMap函数，实现过程我就不说了。只要拆分对象，大家应该都能实现let {parentData，innerData } = splitDataBySyncAttrMap(data，This.setData.syncAttrMap) //内部数据更新if (object.keys (innerdata)。length){ this . setData(innerdata)//setData中也支持回调的回调。为了简化代码，这里不讨论双向绑定的父组件的}//数据触发事件，这样父组件就可以更新if (object.keys (parentdata)。length){ this . triggerevent( # 39；syncAttrUpdate # 39，parentdata)}}})这里就完成了一个简单的双向绑定功能。但是，子组件也可以包含其他组件，这意味着子组件也可以是父组件，父组件也可以是子组件。因此，上述onSyncAttrUpdate setDataSmart函数需要在每个组件中实现，因此没有必要定义一个公共对象BaseComponent来实现上述所有函数，例如:

//BaseComponentconst base component = { properties:{ syncAttrMap:String }，方法:{ setDataSmart() { //...}，onscatrupdate(){//...}}然后将BaseComponent minin添加到每个组件的对象中。此外，小程序中还有一个特殊的组件:页面。虽然Page和component的结构不一样，应该算是一个组件，但是必须是父组件，不能是其他组件的子组件。因此，有必要在所有页面定义中编写onSyncAttrUpdate方法。这些都是minapp双向绑定的基本原则。

等等，最后一件事:wxml模板，不能让用户每次写双向绑定都写这么复杂的语句吧？当然，minapp在编译时会对模板做一个简单的变换:

ltchild childAttr.sync = parentAttr / gt； lt！--因为属性名syncAttrMap是固定的，所以完全可以把上面的模板转换成下面的模板-->: lt；childAttr = { { parentAttr } } syncAttrMap = childAttr = parentAttr / gt；谢谢，这是文章的结尾。欢迎来到minapp:重新定义微信小程序的发展。

相信你看完这个案例已经掌握了方法。更多精彩请关注主机参考其他相关文章！

推荐阅读:

事件的详细解释

如何使用事件循环以上是微信小程序如何实现数据双向绑定的细节。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：微信小程序如何实现双向数据绑定(微信小程序的双向数据绑定) https://zhujicankao.com/80669.html