小程序--组件通信

一、父传子

与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)
  }
})
相关推荐
excel3 分钟前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼24 分钟前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手4 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法4 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku4 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode4 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu4 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu4 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu5 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu5 小时前
【js篇】call() 与 apply()深度对比
前端·javascript