前言

關(guān)于微信小程序中父子組件的創(chuàng)建、傳值，以及涉及到的組件生命周期。

使用組件的優(yōu)點(diǎn)

組件的使用可以提高開發(fā)效率并確保功能在各個(gè)頁面上的應(yīng)用和修改的一致性。
例如，對(duì)于一些重復(fù)的功能，比如頂部導(dǎo)航欄或評(píng)論區(qū)，將其提煉成組件后，我們只需要在不同的頁面中引用該組件，而無需重復(fù)編寫相同的代碼。這樣能夠減少代碼量，提高代碼的可維護(hù)性。
當(dāng)需要修改這些功能時(shí)，只需在組件定義的地方進(jìn)行修改，即可實(shí)現(xiàn)所有引用該組件的頁面都得到更新，避免了在每個(gè)頁面單獨(dú)修改的麻煩。

正文

創(chuàng)建與基本使用

1.1 創(chuàng)建組件
組件一般創(chuàng)建在components文件夾下。
首先在components中新建一個(gè)文件夾，在此文件夾上右擊選擇新建component選項(xiàng)（也可以自己新建page，再將對(duì)應(yīng)生成的四個(gè)子文件移入components中新建的組件文件夾中），建好的目錄結(jié)構(gòu)如下

1.2 使用組件->在父頁面或者父組件的json文件里注冊子組件

{
  "usingComponents": {
    "topNav": "/components/topNav/topnav"
  }
}

1.3 在父頁面或者父組件上應(yīng)用組件

<!-- 父組件中 -->
<view class="container">
    <!-- 頂部菜單 -->
    <topNav></topNav>
</view>

相互傳值或調(diào)用方法

上面的例子只是基礎(chǔ)的用法，不涉及到父子組件之間的通信。
父子組件之間的通信包括：
父組件傳值給子組件、子組件傳值給父組件、父組件調(diào)用子組件的方法、子組件調(diào)用父組件的方法。

1.父組件傳值給子組件

這個(gè)是最簡單也最常用的，主要就是注意子組件中使用properties去接收就好了

1. 父組件傳值：

• childValue 是子組件用來接收父組件傳遞的值
• parentValue 是父組件傳遞給子組件的值。

// 父組件.wxml
<text>這是父組件Component</text>
<view>
  <ChildComponent childValue="{{parentValue}}"></ChildComponent>
</view>


// 父組件.js
Page({
	data: { parentValue : 'Parent'}
})

2. 子組件接收與使用：

// 子組件.js
// 在子組件中聲明要接收的數(shù)據(jù)類型
Component({
	properties: {
		childValue: String,  // String代表接收的參數(shù)類型
	}
})

//使用父組件傳遞過來的數(shù)據(jù)：

// 子組件.wxml
<text>我是子組件ChildComponent</text>
<view>父組件傳遞過來的數(shù)據(jù)：{{childValue}}</view>

這樣子組件就可以接收到父組件傳遞過來的值。

2.子組件傳值給父組件

這個(gè)相對(duì)復(fù)雜一些。
使用 triggerEvent() 方法，用法類似于 Vue 中的 $emit()，關(guān)鍵代碼：
this.triggerEvent(‘myevent’, value) myevent是對(duì)應(yīng)父組件中接收的方法

1. 給子組件自定義一個(gè)事件，并且傳值

// 子組件.wxml
<view class="childContent">
  <text>我是子組件ChildComponent</text>
  <button type="primary" bindtap="handleTap">給父組件傳值</button>
</view>

// 子組件.js
methods: {
	handleTap() {
		// 定義要傳遞的數(shù)據(jù)
		let value = "ChildValue"
		// 觸發(fā)綁定事件, myevent為綁定的父組件中的事件名
		this.triggerEvent('myevent', value)
	},
}

2. 為父組件中引入的子組件綁定事件

// 父組件.wxml
<view class="parentContent">
  <text>這是父組件Component</text>
  <view>
  	// 綁定子組件中`triggerEvent()`對(duì)應(yīng)的事件方法
    <ChildComponent bindmyevent="myevent"></ChildComponent>
  </view>
  <view>父組件：子組件傳遞過來的數(shù)據(jù) {{ParentValue}}</view>
</view>

//接收子組件傳遞過來的內(nèi)容
// 父組件.js
methods: {
	myevent(e) {
		// 這里通過 e 就可以接收子組件傳過來的內(nèi)容了
		console.log(e.detail)
      	this.setData({
        	ParentValue: e.detail
		})
	}
}

3.父組件調(diào)用子組件方法

通過給子組件綁定 id 或 class 選擇器，在父組件里調(diào)用 this.selectComponent 獲取子組件的實(shí)例對(duì)象，就可以調(diào)用子組件中的方法。

其實(shí)就是獲取到了子組件的實(shí)例對(duì)象，那可以調(diào)用它的方法，其實(shí)也可以獲取它的屬性了。

// 子組件.js
methods: {
    Foo() {
      console.log("子組件的方法");
    }
  }

// 父組件.wxml
<view class="parentContent">
  <text>這是父組件Component</text>
  <view>
    <ChildComponent class="ChildEvent"></ChildComponent>
  </view>
  <button type="primary" bindtap="ChildFoo">父組件的按鈕</button>
</view>

// 父組件.js
methods: {
	// 父組件點(diǎn)擊事件，調(diào)用子組件方法
    ChildFoo() {
    	// 獲取子組件的實(shí)例,可以提前獲取
      	let Child = this.selectComponent('.ChildEvent');
      	// 調(diào)用子組件中定義的方法Foo()
      	Child.Foo();
    }
}

4. 子組件調(diào)用父組件方法

子組件通過 this.triggerEvent() 來調(diào)用父組件的方法。

在父組件引入的子組件上添加事件與方法名：
ChildFun是子組件中的方法名，ParentFun是父組件中的方法名；
我們通過子組件的ChildFun來調(diào)用父組件的ParentFun。

// 父組件.wxml
<view>
	<ChildComponent bind:ChildFun="ParentFun"></ChildComponent>
</view>

在父組件中定義方法：
// 父組件.js
methods: {
	ParentFun() {
		console.log('父組件的方法');
	}
}

在子組件中添加了一個(gè)點(diǎn)擊事件，當(dāng)用戶觸發(fā)點(diǎn)擊事件clickParent()的時(shí)候，會(huì)執(zhí)行子組件調(diào)用父組件：

// 子組件.js
methods: {
    clickParent() {
      this.triggerEvent('ChildFun' , )
    }
}

點(diǎn)擊后，子組件就會(huì)執(zhí)行在父組件中的ParentFun()。

注意：this.triggerEvent(‘父組件中子組件上綁定的事件名’ , 參數(shù)（可選）)
后面的參數(shù)根據(jù)父組件的方法進(jìn)行填寫。
如果父組件沒有接收參數(shù)， 則空著不寫，如果接收一個(gè)參數(shù)就寫一個(gè)，兩個(gè)參數(shù)傳入兩個(gè)值。

總結(jié)

簡單總結(jié)：

• 父組件傳值給子組件:子組件properties接收
• 子組件傳值給父組件：子組件this.triggerEvent()激發(fā)傳給父組件
• 父組件調(diào)用子組件的方法：父組件使用this.selectComponent 獲取子組件的實(shí)例對(duì)象
• 子組件調(diào)用父組件的方法:子組件this.triggerEvent()激發(fā)傳給父組件
  可以看出來如果是子組件要想與父組件通信，無論是傳參還是調(diào)用方法，都可以通過this.triggerEvent()實(shí)現(xiàn)。
  傳參也只是調(diào)用方法的一種特殊情況而已。主要看父組件中的調(diào)用的方法是如何使用這個(gè)參數(shù)的。

組件生命周期

具體可查看微信小程序官網(wǎng)內(nèi)容： 小程序官方組件生命周期

組件的生命周期寫法：

Component({
  lifetimes: {
    attached: function() {
      // 在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時(shí)執(zhí)行
    },
    detached: function() {
      // 在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除時(shí)執(zhí)行
    },
  },
  // 以下是舊式的定義方式，可以保持對(duì) <2.2.3 版本基礎(chǔ)庫的兼容
  attached: function() {
    // 在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時(shí)執(zhí)行
  },
  detached: function() {
    // 在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除時(shí)執(zhí)行
  },
  // ...
})

關(guān)于執(zhí)行的順序，可以參考微信小程序——組件生命周期這篇文章的解釋。

總結(jié)：

• 小程序在掛載、初始化的時(shí)候，是從內(nèi)到外（從組件到page），在卸載的時(shí)候也是從內(nèi)到外的
• 頁面回退時(shí)，可以觸發(fā) pageLifetimes 的 show，這個(gè)特性可用來更新組件

組件所在頁面的生命周期

Component({
  pageLifetimes: {
    show: function() {
      // 頁面被展示
    },
    hide: function() {
      // 頁面被隱藏
    },
    resize: function(size) {
      // 頁面尺寸變化
    }
  }
})

參考

圖片與創(chuàng)建父子組件部分內(nèi)容參考微信小程序公共組件封裝，父子組件之間相互傳值和相互調(diào)用方法
父子組件傳值通信與事件觸發(fā)主要參考：微信小程序之父子組件傳值通信與事件觸發(fā)（最全實(shí)用總結(jié)）文章來源地址http://www.zghlxwxcb.cn/news/detail-780085.html

到了這里，關(guān)于【微信小程序】父子組件的創(chuàng)建、通信與事件觸發(fā)；組件生命周期的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！