微信小程序 組件通信相關知識整理

1、自定義組件間通信與事件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

（1）、WXML 數據綁定：用於父組件向子組件的指定屬性設置數據

<!-- 父組件 index.wxml-->
<view class="container">
    // 子組件
    <v-child propA="{{dataA}}" propB="{{dataB}}" propC="{{dataC}}"></v-child>
</view>


<!-- index.json-->
{
  "usingComponents": {
    "v-child": "/components/child/index"
  }
}


<!-- index.js-->

const app = getApp()

Page({
  data: {
    dataA: "來自父組件index的數據",
    dataB: true,
    dataC: 2300
  }
})

<!-- 子組件 child  index.html -->
<view class="content">
  <view>String: {{propA}}</view>
  <view>Boolean: {{propB}}</view>
  <view>Number: {{propC}}</view>
</view>

<!-- 子組件  index.js -->
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    propA: String,
    propB: Boolean,
    propC: Number
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {

  }
})

頁面渲染結果：

 

（2）、事件：用於子組件向父組件傳遞數據，可以傳遞任意數據

<!-- 子組件 event -->


<!-- index.wxml -->

<view class="content">
  <view class="title">自定義事件</view>
  <button bindtap="tapclick">點擊</button>
</view>

<!-- index.js -->

Component({

  /**
   * 組件的方法列表
   */
  methods: {
    tapclick: function(event) {
      let behavior = {
        id: 123456,
        name: 'Natasha',
        gender: 'female'
      }
      this.triggerEvent('customevent', {
        behavior: behavior
      }, {})
    }
  }
})

<!-- 父組件 index -->


<!-- index.wxml -->

<view class="container">　
    <v-event bind:customevent="onCustomEvent"></v-event>
    <view wx:if="{{id}}">id: {{id}}</view>
    <view wx:if="{{name}}">name: {{name}}</view>
    <view wx:if="{{gender}}">gender: {{gender}}</view>
</view>


<!-- index.js -->

const app = getApp()

Page({
  onCustomEvent: function(event) {
    console.log(event)
    let id = event.detail.behavior.id,
        name = event.detail.behavior.name,
        gender = event.detail.behavior.gender
    
    this.setData({
      id: id,
      name: name,
      gender: gender
    })
  },
})

通過 triggerEvent 觸發自定義事件，並把數據通過第二個參數（detail對象）傳遞給父組件

2、組件間代碼共享 Behavior

假如多個子組件共享相同的 properties，data，methods，在每一個組件中都去重復粘貼相同的代碼是完全沒有必要的，這個時候可以用到 behavior

新建一個 my-behavior.js 文件

module.exports = Behavior({
  behaviors: [],
  properties: {
    carModel: String,
    price: Number,
    sale: Boolean
  },
  data: {
    myBehaviorData1: "eyes on me"
  },
  attached: function() {

  },
  methods: {
    myBehaviorMethod: function() {
      console.log("I don't have an idea to buy or not")
    }
  }
})

在組件中 引用 behavior.js

<!-- js -->

let myBehavior = require ("../my-behavior.js")
Component({
  behaviors: [myBehavior],
  /**
   * 組件的屬性列表
   */
  properties: {

  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {

  }
})


<!-- wxml -->

<view class="content">
  <view>v-like component</view>
  <view class="title">共有data屬性：</view>
  <view>{{myBehaviorData1}}</view>
  <view class="title">共有property屬性：</view>
  <view>型號: {{carModel}}</view>
  <view>價格: {{price}}元</view>
  <view>是否折扣：{{sale}}</view>
  <view class="title">共有方法：</view>
  <button bindtap="myBehaviorMethod">button</button>
</view>

例如，父組件 index.wxml 中有 v-like 和 v-movie 共用相同的代碼

<!-- 父組件 index.wxml -->

<view class="container">
  <v-like carModel="SYLPHY" price="135000" sale="true"></v-like>
  <v-movie carModel="XTS" price="250000" sale="false"></v-movie>
</view>

頁面渲染效果

 

3、自定義組件的顯示與隱藏

 顯示與隱藏可以使用 wx:if 和 hidden 來控制，二者都接受一個 Boolean 類型的值，所以傳值的時候就要注意了

  <!-- "false" 是一個非空字符串，所以會顯示 -->
  <view wx:if="false">1、wx:if="false"</view>
  <!-- {{false == ""}}是true，空字符串被解析為false，而hidden為false時，是不會隱藏的，所以會顯示 -->
  <view hidden="">2、hidden=""</view>
  <!-- 同上，wx:if 為true時才會插入到DOM節點中，此時為false，所以不會顯示 -->
  <view wx:if="">3、wx:if=""</view>
  <!-- 與 1 相同，無論是字符串 "true" 還是 "false"，都被解析成true，所以下面兩個都會被隱藏 -->
  <view hidden="true">4-1、hidden="true"</view>
  <view hidden="false">4-2、hidden="true"</view>
  <!-- 以下兩個都是布爾值，所以一個不被渲染到DOM中，一個被隱藏 -->
  <view wx:if="{{false}}">5、wx:if="{{false}}"</view>
  <view hidden="{{true}}">6、hidden="{{true}}"</view>

渲染結果：

按照上面的寫法，避開雷區，嘗試用 wx:if 和 hidden 分別來隱藏自定義組件 v-like 和 v-movie

<view class="container">
  <v-like hidden="{{true}}" carModel="SYLPHY" price="135000" sale="true"></v-like>
  <v-movie wx:if="{{false}}" carModel="XTS" price="250000" sale="false"></v-movie>
</view>

理論上，這兩個自定義組件應該都不會顯示，但實際上，只有 wx:if 達到了預期的效果

那為什么自定義組件 v-like 上的hidden沒有起作用呢？無論 hidden="{{true}}" 還是 hidden="{{false}}" 都沒辦法讓它隱藏，這里有一種可能就是 hidden 被當做成和 carModel，price 一樣的自定義屬性了

現在嘗試將 hidden 當做自定義屬性由父組件向子組件v-like傳值，v-movie 不做修改。將 hidden 值設為 true。如果成功的話，v-like 組件將被隱藏，v-movie 組件將會顯示

<!-- index.wxml -->

<view class="container">
  <v-like hidden="{{hidden}}" carModel="SYLPHY" price="135000" sale="true"></v-like>
  <v-movie wx:if="{{hidden}}" carModel="XTS" price="250000" sale="false"></v-movie>
</view>


<!-- index.js -->

Page({
  data: {
    dataA: "來自父組件index的數據",
    dataB: true,
    dataC: 2300,
    hidden: true
  }
})

v-like 組件加上 hidden 屬性

<!-- like.wxml  -->

<view class="content" hidden='{{hidden}}'>
  <view>v-like component</view>
  <view class="title">共有data屬性：</view>
  <view>{{myBehaviorData1}}</view>
  <view class="title">共有property屬性：</view>
  <view>型號: {{carModel}}</view>
  <view>價格: {{price}}元</view>
  <view>是否折扣：{{sale}}</view>
  <view class="title">共有方法：</view>
  <button bindtap="myBehaviorMethod">button</button>
</view>


<!-- like.js -->

properties: {
    hidden: Boolean
},

v-movie 不加 hidden屬性

<view class="content">
  <view>v-movie component</view>
  <view class="title">共有data屬性：</view>
  <view>{{myBehaviorData1}}</view>
  <view class="title">共有property屬性：</view>
  <view>型號: {{carModel}}</view>
  <view>價格: {{price}}元</view>
  <view>是否折扣：{{sale}}</view>
  <view class="title">共有方法：</view>
  <button bindtap="myBehaviorMethod">button</button>
</view>

渲染結果：

結果和預期的一樣，所以，要控制自定義組件的顯示與隱藏，如果不考慮性能消耗的情況下，可以直接使用 wx:if；如果 hidden 更符合實際需求，可按如上方法來使用

 

 

示例代碼：https://github.com/frwupeng517/wetchat-applet-behavior-