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

父子组件通信 目前共有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);
    }
  }
})