微信小程序 父子組件 通信 ---監聽數據

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