如何在小程序页面上，更新被调用组件上的元素或标记的数据

相信大家组件都已经用过了。

 

也大概了解了他们的通讯方式。

 

但是，如果我们要在页面上动态的更新 页面上的组件显示的内容，该怎么办？

 

以下演示给大家看。

 

首先我有以下：

 

组件A wxml:

<view class='navbarCon acea-row row-center-wrapper' wx:if='{{parameter.navbar==1}}'>

<view class='name {{parameter.color==true?"on":""}} line1'>{{parameter.title}}</view>

<view class='iconfont icon-xiangzuo {{parameter.color==true?"on":""}}' wx:if='{{parameter.return==1}}' bindtap='return'></view>

 

组件A JS建立此方法：

 

setTitle: function (title) {

this.setData({

 

'parameter.title': title//byrick 2019-8-28

})

}

 

以上方法用于更新组件WXML里的 title

 

然后后我们看看主页面的调用：

 

页面B wxml:

<navbar parameter='{{parameter}}' id='navbar'></navbar>

 

页页B JS

初始化的调用：

 

Page({

 

/**

* 页面的初始数据

*/

data: {

parameter: {

'navbar': '1',

'return': '1',

'title': '商品详情',

'color': true,

'class': '0'

},

 

 

动态的调用：

 

that.selectComponent('#navbar').setTitle(storeInfo.store_name);

 

至此，我们就完成了 页面B 更新组件WXML里的数据。