拓者设计吧论坛秦皇岛seo排名
微信小程序组件传参感觉和vue还是挺像的
父组件向子组件传参
在小程序中父组件子组件传参，主要使用properties属性。演示下：
创建组件文件夹component，创建组件demoComponent，记得创建的时候选择组件，不是page页面
组件代码，这里简单写了一个tab栏，动态判断绑定类名
<view class="tablist">
<view class="tabitem {{item.id==active ?'active' :''}}" wx:for="{{tablist}}"> {{item.name}}</view>
</view>在 properties里面生命一个active，来实现当前选中项，值为number类型
// component/demoComponent/demoComponent.js
Component({/*** 组件的属性列表*/properties: {active:{type:Number}},/*** 组件的初始数据*/data: {tablist:[{id:1,name:'全部'},{id:2,name:'零食'},{id:3,name:'饮料'},],},/*** 组件的方法列表*/methods: {}
})
.tablist{display: grid;grid-template-columns: repeat(3,1fr);
}
.tabitem{text-align: center;padding: 10px 0;
}
.active{border-bottom: 3px solid blue;
}在页面中使用的时候，需要在json中声明
{"usingComponents": {"demoComponent":"/component/demoComponent/demoComponent"}
}这里传入active为2
<demoComponent active='2' />当组件渲染的时候，第二项被赋上active样式
子向父传参
使用自定义事件，triggerEvent。这点和vue非常相似，传入两个参数，第一个参数为自定义事件名，第二个为传递的值。演示下，稍微修改下组件代码
绑定事件
<view class="tablist">
<view bind:tap="sendInfo" class="tabitem {{item.id==active ?'active' :''}}" wx:for="{{tablist}}"> {{item.name}}</view>
</view>使用triggerEvent来传递数据（组件js代码，写在methods中）
sendInfo(){const data={name:'zs',age:12}this.triggerEvent('sendData',data)}父组件接受
<demoComponent active='2' bind:sendData="getData"/>getData(e){console.log('e',e.detail);},当点击组件的时候，可以从控制台看到拿到从子组件传递的值了
跨组件传参
建议使用全局变量，在微信小程序中，全局变量写在app.js中globalData对象里面，在页面中通过getApp() 方法即可访问到app.js里面的方法和全局变量。全局方法不需要写在methods里面，和globalData同一级的
globalData: {myInfo:{name:'aaaaa',age:1231212}},getMethosFunc(){console.log('获取app.js的方法');} onLoad(options) {const app=getApp();console.log('myinfo',app.globalData.myInfo);app.getMethosFunc();},
end