小程序--组件通信

一、父传子

与vue利用props类似,小程序是利用自定义属性:properties

javascript 复制代码
// components/my-nav/my-nav.js
Component({
  // 小程序组件默认样式是隔离,addGlobalClass设置为true可允许外部修改样式
  options: {
    addGlobalClass: true,
    // 只要使用到具名插槽,都需要将multipleSlots设置为true
    multipleSlots: true
  },
  externalClasses: ["custom-class"],
  // 内部数据
  data: {
    statusBarHeight: 0
  },
  // 外部数据--父传子
  properties: {
    // back: Boolean
    back: {
      type: Boolean,
      value: false
    },
    delta: {
      type: Number,
      value: 1
    }
  },
  // 生命周期
  lifetimes: {
    created(){},
    attached() {
      const { statusBarHeight } = wx.getSystemInfoSync()
      console.log(wx.getSystemInfoSync())
      console.log(statusBarHeight)
      this.setData({
        statusBarHeight: statusBarHeight
      })
    }
  }
})
html 复制代码
<view class="navigation-bar custom-class" style="padding-top: {{statusBarHeight}}px;">
  <view class="navigation-bar-title title-class">
    <text class="back-text" wx:if="{{ back }}" open-type="navigateBack" delta="{{ delta }}">返回</text>
    <slot name="left"></slot>自定义标/题<slot name="right"></slot>
  </view>
</view>
html 复制代码
<app-nav custom-class="nav_title" back="{{ true }}" >
  <text slot="left">◀</text>
  <text slot="right">▶</text>
</app-nav>

二、子传父

类似vue使用$emit方法,小程序利用triggerEvent和bind:自定义事件方法向父组件传递参数。

注意:小程序组件中的方法,要写在js的methods中

javascript 复制代码
// components/my-nav/my-nav.js
Component({
  // 小程序组件默认样式是隔离,addGlobalClass设置为true可允许外部修改样式
  options: {
    addGlobalClass: true,
    // 只要使用到具名插槽,都需要将multipleSlots设置为true
    multipleSlots: true
  },
  externalClasses: ["custom-class"],
  // 内部数据
  data: {
    statusBarHeight: 0
  },
  // 外部数据--父传子
  properties: {
    // back: Boolean
    back: {
      type: Boolean,
      value: false
    },
    delta: {
      type: Number,
      value: 1
    }
  },
  methods: {
    onTap() {
      // this.triggerEvent('自定义事件',参数)
      this.triggerEvent('getBarHeight',this.data.statusBarHeight)
    }
  },
  // 生命周期
  lifetimes: {
    created(){},
    attached() {
      const { statusBarHeight } = wx.getSystemInfoSync()
      console.log(wx.getSystemInfoSync())
      console.log(statusBarHeight)
      this.setData({
        statusBarHeight: statusBarHeight
      })
    }
  }
})
javascript 复制代码
<view class="navigation-bar custom-class" style="padding-top: {{statusBarHeight}}px;">
  <view class="navigation-bar-title title-class">
    <text class="back-text" wx:if="{{ back }}" open-type="navigateBack" delta="{{ delta }}">返回</text>
    <slot name="left" bind:tap="onTap"></slot>自定义标题<slot name="right"></slot>
  </view>
</view>
html 复制代码
<!-- 页面注册自定义组件 -->
<!-- <page-search /> -->
<app-nav custom-class="nav_title" back="{{ true }}" bind:getBarHeight="getBarHeightFn" >
  <text slot="left">◀</text>
  <text slot="right">▶</text>
</app-nav>
javascript 复制代码
// pages/component/index.js
Page({
  getBarHeightFn(e) {
    console.log(e.detail)
  }
})
相关推荐
今夜星辉灿烂2 分钟前
nestjs微服务-系列2
javascript·后端
一个水瓶座程序猿.3 分钟前
ES6数组的`flat()`和`flatMap()`函数用法
前端·ecmascript·es6
袁煦丞19 分钟前
AI直接出答案!Perplexica开源搜索引擎:cpolar内网穿透实验室第534个成功挑战
前端·程序员·远程工作
Hilaku21 分钟前
用“人话”讲明白10个最常用的正则表达式
前端·javascript·正则表达式
木叶丸30 分钟前
跨平台方案该如何选择?
android·前端·ios
LL.。33 分钟前
同步回调和异步回调
开发语言·前端·javascript
网络点点滴37 分钟前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
运维咖啡吧38 分钟前
周一才上线的网站,单单今天已经超过1000访问了
前端·程序员·ai编程
世界哪有真情41 分钟前
用虚拟IP扩容端口池:解决高并发WebSocket端口耗尽问题
前端·后端·websocket
前端世界42 分钟前
打造一个可维护、可复用的前端权限控制方案(含完整Demo)
前端