小程序--组件通信

一、父传子

与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)
  }
})
相关推荐
拾光拾趣录6 分钟前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区17 分钟前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠1 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞1 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到112 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构