微信小程序中組件的使用：

微信小程序中組件定義在項目根目錄下components文件夾下，在頁面使用的時候需要在頁面的json文件中聲明，如

父組件向子組件傳值及子組件向父組件傳值：

父組件wxml中：通過屬性綁定值的方式向子組件傳值，通過自定義事件接收子傳遞過來的值

<!-- 父組件向子組件傳值：和vue或uni-app相同，title='連接WiFi' -->
<header title='連接WiFi' bindEmitheadClick='bindEmitheadClickHandle'></header>

子組件wxml中: 通過{{}}方式顯示父組件中接收到的值，用事件觸發(fā)triggerEvent方法向父組件傳值

<!-- 通過headClickHandle函數(shù)觸發(fā)triggerEvent向父組件發(fā)送消息 -->
<view class='header' bindtap='headClickHandle'>{{title}}</view>

子組件js：通過properties接收父組件傳過來的值，通過triggerEvent向父組件發(fā)送消息，類似emit()

// 組件使用Component聲明
Component({
//  properties:用來接收父組件傳遞的內(nèi)容，類似vue中props
  properties: {
    title: {
      type: String,
      value: '默認標題'
    }
  },
  data: {

  },
  // 組件中的方法可以定義在methods中
  methods: {
    headClickHandle () {
      console.log('子組件點擊了')
      // 子組件向父組件傳值：triggerEvent,類似vue或uni-app中的this.emit()
      this.triggerEvent('EmitheadClick', {name:'jack',age:18})
    }
  },
  // 微信小程序組件中的生命周期函數(shù)可以直接寫在Component中的一級對象中，還可以寫在lifetimes中的節(jié)點下，這種方式是推薦的
  lifetimes: {
    // created 組件首次創(chuàng)建時觸發(fā)，進入每個使用該組件的頁面后只加載一次
    created () {
      console.log('組件被創(chuàng)建了')
    },
    // ready 組件試圖加載完后執(zhí)行，也是只只執(zhí)行一次
    ready () {
      console.log('ready')
    },
    // moved 組件位置發(fā)生改變時觸發(fā)
    moved () {
      console.log('moved')
    },
    // 組件進入頁面時觸發(fā)，只觸發(fā)一次
    attached () {
      console.log('attached')
    }
  },
  // 組件被頁面移出時觸發(fā)
  detached () {
    console.log('組件被卸載了')
  },
  // error 組件拋出異常是觸發(fā)
  error () {
    console.log('error')
  }
})

提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。
筆者：苦海文章來源地址http://www.zghlxwxcb.cn/news/detail-606497.html

到了這里，關(guān)于微信小程序中組件的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！