前言
最近想做小程序,于是有了这边文章,主要是记录遇到一些坑
一、数据篇
1.1、获取数据、赋值数据
// 获取
this.data.datalist
// 赋值数据
this.setData({
datalist: list
})
1.2、wx.navigateTo()多个参数传参方法
参数传递
1.数据需要转义为字符串才能通过参数传递 JSON.stringify()
2.多个参数传递,前面要加 & 符号
参数接收
接收时使用 JSON.parse() 方法将数据转换为 JavaScript 对象
let dataList = JSON.stringify(this.data.dataLists)
wx.navigateTo({
url: '../details/details?dataList=' + dataList + '&violations=' + this.data.violations,
});
onLoad: function (options) {
let list = JSON.parse(options.dataList)
this.setData({
datalist: list,
violations: options.violations,
})
}
1.3、bindtap事件传递参数的方法
<view bindtap="goTo" data-index={{item.index}}>点击事件传参</view>
goTo (e) {
// 传递的参数
const index= e.currentTarget.dataset['index'];
}
二、父子传值,调用函数
- 父页面
<block wx:for="{{commentList}}" wx:for-item="commentItem" wx:key="{{index}}">
<comment id = 'children' commentItem='{{commentItem}}' bind:twoLevelCommentBtn='twoLevelCommentBtnClick' binddemoTextChange="handleDemoTextChange"></comment>
</block>
<text>{{text}}</text>
<button bindtap="handParentChird">父调子</button>
Page({
data: {
commentList: [
'../../utils/img/index.jpeg',
'../../utils/img/index2.jpeg',
'../../utils/img/index.jpeg'
],
text: ''
},
onLoad: function (options) {
},
// 子传父
handleDemoTextChange(e){
let text=e.detail.text;
// 修改父级变量,子组件也会响应式的发生变化
this.setData({
text
})
},
// 父调子
handParentChird() {
// 打印出来的就是children 组件的实例了
this.selectComponent('#children').childrenFn()
}
});
- 子页面
<view>
dsdsd
<image class='comment-comment' src='{{commentItem}}'
data-author-name="111111">
</image>
<button bindtap="textChange">子调父</button>
</view>
Component({
properties: {
commentItem: {
type: String,
value: ''
}
},
data: {},
// 组件的方法列表
methods: {
// 父调子
childrenFn(){
console.log('我是子组件的方法')
},
// 子组件调用父页面、组件函数
textChange() {
/**
点击事件触发的时候
触发父组件中的自定义事件,同时传递数据给 父组件
this.triggerEvent("父组件事件名称",传递的参数);
*/
let text = "子组件修改父级的text" + this.data.commentItem
// 触发 父组件的事件 自定义
this.triggerEvent("demoTextChange", {text});
}
}
});
2.1、父传子值
<!--父页面-->
<comment id = 'children' commentItem='{{commentItem}}'></comment>
// 子js接收
properties: {
commentItem: {
type: String,
value: ''
}
},
2.2、父调用子函数
// 父组件
handParentChird() {
// 打印出来的就是children 组件的实例了
this.selectComponent('#children').childrenFn()
}
// 子组件
childrenFn(){
console.log('我是子组件的方法')
},
2.3、子传父值、子调用父函数
// 父函数
handleDemoTextChange(e){
let text=e.detail.text;
// 修改父级变量,子组件也会响应式的发生变化
this.setData({
text
})
},
// 子函数,第二个参数是参数
textChange() {
/**
点击事件触发的时候
触发父组件中的自定义事件,同时传递数据给 父组件
this.triggerEvent("父组件事件名称",传递的参数);
*/
let text = "子组件修改父级的text" + this.data.commentItem
// 触发 父组件的事件 自定义
this.triggerEvent("demoTextChange", {text});
}