一.页面向组件内部传值
第一步 在页面的json文件中 配置要引用的组件的路径
{
"usingComponents": {
"my-sel" : "/components/my-sel/my-sel"
}
}
第二步 页面向组件 传值
在页面中创建组件
<button size='mini' bind:tap = "handleIncrementCpn">修改组件内的数据</button>
<my-sel class="sel-class" id = "sel-id"/>
页面的js中实现点击方法
Page({
handleIncrementCpn (){
//1.获取组件对象
const my_sel = this.selectComponent('.sel-class')
//通过方法对数据进行修改
my_sel.incrementCounter(10)
}
})
第三步 组件内接收页面传过来的值
Component({
/**
* 组件的初始数据
*/
data: {
counter : 0
},
/**
* 组件的方法列表
*/
methods: {
incrementCounter(num){
this.setData(
{
counter : this.data.counter + num
}
)
}
}
})
二.组件向页面内部传值
第一步页面内准备接收组件传过来的值
<view>当前计数:{{counter}}</view>
<my-event bind:increment="handleIncrement666"/>
Page({
data: {
counter : 0
},
})
第二步 组件内的值向外传递
<button size='mini' bind:tap = "handleIncrement">+1</button>
Component({
/**
* 组件的方法列表
*/
methods: {
handleIncrement(){
//类似于iOS的通知 将事件发出去
this.triggerEvent('increment',{name:'why',age : 18});
}
}
})
第三步 页面内接收到组件内的事件去执行修改自身值的操作
Page({
data: {
counter : 0
},
handleIncrement666 (){
//可接收组件内传过来的值
console.log("++++++++",event);
this.setData({
counter:this.data.counter + 1
})
}
})
