直播小程序源码,组件封装需要注意的内容
直播小程序源码,组件封装需要注意的内容
1、在components文件加下新建组件文件夹,在该文件夹下新建组件
2、在app.json中注册该组件
"usingComponents": { "page": "components/auth/index", "componentB":"/components/componentB/componentB.js" },
3、子组件
1、组件的json中,设置该页面为组件
{ "component": true }
2、组件js
// pages/integral/integralRules/index.js.js Component({ behaviors: [], // 父组件传入的值在这里,传入的值在这里接受 properties: { ruleShow : Boolean // 父组件的值 }, data: { ruleShow:false, }, // 私有数据,可用于模版渲染 // 生命周期函数,可以为函数,或一个在methods段中定义的方法名 attached: function () {}, moved: function () { }, detached: function () { }, methods: { // 此处编写方法 onClickHide() { this.setData({ ruleShow: false }); } } })
4、父组件
1、父组件的json中引入子组件
{ "usingComponents": { "componentB":"/component/componentB/componentB.js" } }
2、页面使用,父传子
<page pclass="page"> // 加上page 会占位 <view> // .... // json中引入的名字在这里使用,这里就是引入的组件 // ruleShow为自定义名称,{{xxx}}为父组件传入的值 <componentB ruleShow='{{ruleShow}}'></componentB> </view> </page>
data: { ruleShow: false, }, // 规则弹框 showFunction() { console.log('更改父组件的值'); this.setData({ ruleShow : true }) } // 这里更改的值会回传给子组件
1、这里封装了一个弹窗组件,弹窗组件一般通过true和false控制显示和隐藏,隐藏状态下不占位,但如果组件的wxml上带有<page pclass="page>包裹,那么即使组件时隐藏状态也会占位,此时需要去掉才可以做到不占位效果。
<page pclass="page"> // 加上page 会占位 <!-- 弹窗 --> <van-overlay show="{{ ruleShow }}" bind:click="onClickHide"></van-overlay> </page>
以上就是直播小程序源码,组件封装需要注意的内容, 更多内容欢迎关注之后的文章