搜索到
3
篇与
微信小程序
的结果
-
微信小程序：计算属性的两种体现方式及应用场景 在wxml文件中使用的计算属性很多时候我们需要将数据加工后再显示到页面上，例如，我在显示排行榜的循环中，排名我需要在个位数之前补0这样的操作时就需要在wxml页面中使用到计算属性。微信小程序的计算属性和vue有所不同，在页面中使用的时候可以如下：<view class="container"> <wxs module="fn"> module.exports = { reverse: function(str) { return str.reverse() }, arr2Str: function(arr) { return arr.join('、') } } </wxs> <text>{{ fn.reverse('大海爱奔跑') }}</text> <text>{{ fn.arr2Str(['Vue', 'Node', '小程序', 'JS', 'CSS']) }}</text> </view>计算属性有时候可能需要使用到 data，但是在页面中的计算属性没办法直接拿到data，使用只能当做参数传入其中。<wxs module="fn"> module.exports = { getText: function(keyword, length) { // 这里不能使用`${xxx}`格式，否则报错 return '关键词' + keyword + '匹配到 ' + length + ' 个结果' } } </wxs> <!-- 这里传入keyword和names.length，上面的getText则可以使用 --> <view class="key">{{ fn.getText(keyword, names.length) }}</view>在JS文件中使用的计算属性上面我们讲了微信小程序页面上的计算属性使用，现在来介绍一下微信小程序在js文件中计算属性的使用，这其中就需要用到npm模块了。安装npm模块npm install --save miniprogram-computed具体使用方法const computedBehavior = require("miniprogram-computed").behavior; Component({ behaviors: [computedBehavior], data: { a: 1, b: 1, }, computed: { sum(data) { // 注意： computed 函数中不能访问 this ，只有 data 对象可供访问 // 这个函数的返回值会被设置到 this.data.sum 字段中 return data.a + data.b; }, }, methods: { onTap() { this.setData({ a: this.data.b, b: this.data.a + this.data.b, }); }, }, });以上就是微信小程序中关于计算属性的两种使用方法和场景，参考了网络上的其他人的帖子总结而来转载自：https://developer.aliyun.com/article/813779https://segmentfault.com/a/1190000041022284?sort=votes -
微信小程序父子组件方法调用方法汇总 父组件向子组件传值父组件通过属性传值<childEle childParams="{{params}}"></childEle>子组件通过properties接收：properties: { childParams: { type: String } }子组件调用父组件方法父组件定义方法，childFun是子组件中的方法名，fun是父组件中的方法名。我们通过chidlFun来调用fun。<childEle childParams="{{params}}" bind:childFun="fun"></childEle>父组件方法：childFun(e){ console.log('我是父组件的方法', e) }当点击子组件的按钮执行 clickFun 时调用父组件的方法clickFun(){ this.triggerEvent('childFun');//如果需要传递参数，直接写在triggerEvent的参数里即可 }父组件调用子组件的方法<childEle id="childEle" childParams="{{params}}" bind:childFun="fun"></childEle>父组件的 onReady 生命周期中获取 childEle 元素onReady(){ this.childEle = this.selectComponent('#childEle'); }父组件的点击事件 childF 调用子组件的事件：<view bindtap="childF">我是父组件的点击事件</view>父组件触发子组件的方法：childF(){ this.childEle.foo() }这里的 foo即为子组件的方法。文章转自：https://blog.csdn.net/sinat_33255495/article/details/121113589
-
