说起微信小程序的传值我们就想起来了vue,其实大致分成了两种,一种是父传子,一种是子传父,这里我做了一下总结!
引入组件
1,首先在components注册咱们的组件。
2,在父组件的.json写入
"usingComponents": {
"sear":"../../components/sear/sear"
},
3.然后就在咱们的xhtml页面写入
<tabs></tabs>
这样咱们一个最基础的组件就写完了
父传子
1,首先在咱们父组件的.js文件的data声明要传入子组件的值这里我传入了一个父组
data: {
tabs:['综合','销量','价格']
}
2,然后在咱们的页面xhtml传入子组件等待子组件接受
<tabs tabs="{{tabs}}"></tabs>
3.然后打开咱们的子组件,接受传过来的数据
properties: {
tabs:{
type:Array,
value:[]
}
},
这里咱们在properties接收
type:传入的类型
value:默认值
4,子组件使用父组件传过来的值
<block wx:for="{{tabs}}">
这样就完成了
子传父
1,子传值咱们使用this.triggerEvent('a',{b})传值
这里有两类参数
第一个是传入的事件名,这个名可以自己定义
第二类参数可以传无数个值,是子组件传入父组件的参数
methods: {
tabsBtn(index){
let indexs = index.currentTarget.dataset.index
this.triggerEvent('tabsBtn',{indexs})
}
}
2接收
<tabs tabs="{{tabs}}" bindtabsBtn="tabsBtn"></tabs>
使用bind+子组件传入事件名接收 然后在注册一个事件
3.接收父组件传入的值
tabsBtn(indexs){
console.log(indexs.detail.indexs)
}
输出的就是父组件传过来的参数了