微信小程序 父子组件 通信 ---监听数据

父子组件通信 目前共有2种

 

1. 模板创建 template (用于展示) 

components/tips/index.wxml

<template name="tabBar">
  子组件 <view class="container">{{tabBar}}</view> </template>
pages/test/index.wxml

<import src="../../components/tips/index.wxml"/>
<view>
  <view>父组件</view>
 <view>
  <template data="{{tabBar}}" is="tabBar"></template>
</view>
</view>
pages/test/index.js

Page({
  data: {
      tabBar: ‘暂时没有任务哦~‘
  }
})

  

2. 创建组件 Component (用户交互/逻辑)

父组件

pages/Hello/index.wxml

<!-- 父组件 -->


<view class="parentsContent"> <view>备注:父组件中定义变量,子组件监听并计算返回值,类似vue的computed</view> <view class="parentsAll"> <view>下面是父组件数据</view> <input placeholder="请输入a" value="{{numberA}}" bindblur="bindChangeA"/> <input placeholder="请输入b" value="{{numberB}}" bindblur="bindChangeB"/> <view>a*b结果: {{priceAll}}</view> <testComponent bind:myevent="onMyevent" numberA="{{numberA}}" numberB="{{numberB}}"> <text>将父组件的一段文字放入子组件的slot中</text> </testComponent> </view> </view>
pages/Hello/index.wxss

/* 父组件 */ .parentsAll{ border: 1px solid blue; padding: 10px; margin-top: 10px; } .parentsContent{ padding: 10px; margin: 10px; }
pages/Hello/index.json

// 父组件
{ "component": true, // 开启自定义组件 "usingComponents": { "testComponent": "/pages/test/index" // 自定义组件的引用 } }
pages/Hello/indexjs

// 父组件
Page({ data: { numberA: 0, numberB: 1, priceAll: 0 }, onReady: function () { }, //定义的事件: onMyevent: function (e) { var get_text = e.detail.text; console.log(‘进入onMyevent‘, e) this.setData( { "ctext": get_text, "priceAll": e.detail.total }, ) }, bindChangeA: function (params) { this.setData({ numberA: params.detail.value }) }, bindChangeB: function (params) { this.setData({ numberB: params.detail.value }) } })

  

子组件

components/testAll/index.wxml

<view class="test_all">
  <view>下面子组件数据</view>
  <button bindtap="_onTap" type="primary" size="mini">
    a*b点击事件
  </button>

  <view class=‘hahaha‘>
    <slot />
  </view>
</view>
components/testAll/index.wxss

.test_all{
  border: 1px solid red;
  padding: 10px;
  margin-top: 10px;
}
components/testAll/index.js


Component({

  behaviors: [],

  properties: {
    numberA: {
      type: Number,
      observer: function (news, olds, path) {
        this.setData({
          numberAs: news
        })
      }
    },
    numberB: {
      type: Number,
      observer: function (news, olds, path) {
        this.setData({
          numberBs: news
        })
      }
    }
  },

  data: {
    numberAs: 0,
    numberBs: 1,
    priceTotal: 0
  }, // 私有数据,可用于模板渲染

  observers: {
    ‘numberAs, numberBs‘: function (numberA, numberB) {
      this.setData({
        priceTotal: (numberA * numberB).toFixed(2)
      })
    }
  },

  lifetimes: {
    // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function () {
    console.log("子组件中的数据:", this.data)
  },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },
 // 方法
  methods: {
    onMyButtonTap: function () {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _onTap: function () {
      console.log(‘this‘, this.data)
      var myEventDetail = { // detail对象,提供给事件监听函数  //监听函数可以通过e.detail查看传递的数据;
        hidden: false,
        text: this.data.ctext,
        total: this.data.priceTotal
      }
      var myEventOption = {

      } // 触发事件的选项

      this.triggerEvent(‘myevent‘, myEventDetail, myEventOption);
    }
  }
})

  

微信小程序 父子组件 通信 ---监听数据

上一篇:wx: 小程序公共机制


下一篇:使用umeng 的微信出现未验证应用的总结