事先准备
创建一个项目够 修改目录下的app.json,在pages中注册页面 ,同时新增test1组件 也在app.json中注册为全局组件 并命名为my-test
app.json 配置
{
"pages":[
"pages/home/home",
"pages/my/my",
"pages/cart/cart"
],
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "首页"
},
{
"pagePath": "pages/my/my",
"text": "我的"
}
]
},
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"usingComponents": {
"my-test":"components/test1/test1"
}
}
1、父向子传递数据
例:小程序的home页面要向自定义组件 my-test中 传递 my-test组件计算的初始值 preValue
Home组件
js中:
// pages/home/home.js
Page({
data: {
preValue:1000
}
})
wxml:
引用my-test组件 左边为子组件要接收的变量名 ,右边为自己要传递的变量值
<my-test preVal="{{preValue}}"></my-test>
test1组件
js中:(注意不同:接收的参数 可读可写)
// components/test1/test1.js
Component({
properties: {
preVal:{
type:Number,
value:0
}
},
data: {
info:"这是一个组件"
},
methods: {
addOne(){
this.setData({
preVal:this.data.preVal+1
})
}
}
})
wxml中:
<view>
{{preVal}}
</view>
<button bindtap="addOne">
+1
</button>
2、子组件向父组件传递数据
例:在上面例子的基础上 ,父组件中也显示子组件中计算的值 每次点击按钮 子组件计算完后 也要将数据回传给父组件显示
父组件中定义接收参数能给自身变量赋值的函数 传递给子组件 。子组件通过 this.triggerEvent('接收到的函数名',{value:要传递的值})
Home页面
js:
// pages/home/home.js
Page({
data: {
preValue:1000,
sonVal:0
},
setSonVal(e){
// console.log(e);
this.setData({
sonVal:e.detail.value
})
}
})
wxml:
<my-test preVal="{{preValue}}" bind:toSendValue="setSonVal"></my-test>
<view wx:if="{{sonVal===0?false:true}}">子组件的计算值{{sonVal}}</view>
子组件test1
在方法中添加一行
methods: {
addOne(){
this.setData({
preVal:this.data.preVal+1
})
this.triggerEvent('toSendValue',{value:this.data.preVal})
}
}
3、子父之间通过组件选择器任意传值
可在父组件里调用 this.selectComponent(“id或class选择器”) ,获取子组件的实例对象,从而直接访问子组
件的任意数据和方法。调用时需要传入一个选择器,例如 this.selectComponent(“.my-component”)
同第一个例子:小程序的home页面要向自定义组件 my-test中 传递 my-test组件计算的初始值 preValue 同时将子组件的值传递回父组件
Home
// pages/home/home.js
Page({
data: {
preValue:1000,
sonVal:0
},
toSonVal(){
const child= this.selectComponent(".my_test");
child.changePreVal(1000);
this.setData({
sonVal:child.data.preVal
})
}
})
<!--pages/home/home.wxml-->
<my-test class="my_test"></my-test>
<button bindtap="toSonVal">向子组件传值</button>
<view>子组件的值 {{sonVal}}</view>
test
// components/test1/test1.js
Component({
properties: {
},
data: {
preVal:0
},
methods: {
// 定义给父组件调用的方法
changePreVal(e){
console.log('调用');
this.setData({
preVal:e
})
}
}
})
通过 this.selectComponent()比较灵活