小程序自定義組件以及template模板

小程序 template的使用 VS 小程序自定義組件:

Component

Component允許有自己的方法和屬性,它包括wxml,wxss,js,json文件

注意:在自定義組件中(如mask組件)用id選擇器會報錯:
VM2696:1 Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.

//mask.wxss
#iii{
	width: 800rpx;
	height: 800rpx;
	background-color: #f0f;
}

準備工作:
在pages同級目錄下創建components目錄,然後創建mask目錄,右鍵,新建components

父組件向子組件傳參:

father.json: 小程序Json文件中不能寫註釋,必須用雙引號,不能用單引號

{
	"usingComponents": {
		"maskComponent": "../../components/mask/mask"
	}
}

father.wxml:

<!--name的值爲json配置文件中usingComponents的鍵值 -->
<!--使用maskComponent組件(對應的JSON中寫的什麼就什麼)，
父傳子:父組件中傳遞一個在data中定義的參數/值,子組件js的properties中映射,然後在wxml中引用.
給子組件傳遞paramParentToChild參數,值爲變量dadToSon的值
-->
<maskComponent paramParentToChild="{{dadToSon}}"></maskComponent>

father.js:

data: {
	dadToSon:"這是爸爸給兒子傳的值",
}

components/mask/mask.wxml

<text>components/mask/mask.wxml</text>
<view class="box" bindtap="haha"></view>
<view>
	父組件給子組件傳值: {{paramParentToChild}}  //接受父組件穿過來的參數
</view>
<view class="iii"></view>

components/mask/mask.wxss

.box{
	width: 100rpx;
	height: 100rpx;
	background: yellow;
}
.iii{
	width: 800rpx;
	height: 800rpx;
	background-color: #f0f;
}

// components/mask/mask.js

Component({
	/**
	* 組件的屬性列表
	*/
	// vue裏面叫props,對應父組件傳過來的參數,是組件的對外屬性的映射
	// type屬性類型,value屬性值,observer屬性值被更改是的響應函數
	properties: {
		paramParentToChild: {
			type: String,//類型
			value: 'default value'//默認值
		}
	},
	/**
	* 組件的初始數據,組建內部數據定義在這裏,和properties中的屬性一同渲染組件
	*/
	data: {
	},
	/**
	* 組件的方法列表
	*/
	// 子組件的方法需要寫在methods：{}裏面
	methods: {
	//haha是子組件中的一個普通的方法
		haha: function(){
			console.log("I'm a component,哈哈哈哈哈哈哈哈")
		}
	}
})

mask.json

{
	"component": true,
	"usingComponents": {}
}

子組件向父組件傳參:

father.wxml

<!-- 
子組件向父組件傳遞數據主要通過監聽事件, 比如like點贊功能觸發了一個like事件
父組件通過綁定like事件來監聽
在組件引用的時候,綁定一個子組件中的事件名字onMyEvent,這個事件要在父組件的JS中也要定義,
可以名字不同,但是要對應.子組件觸發該事件,然後向父組件傳值
-->
<maskComponent bind:myevent="onMyEvent"></maskComponent>
<view class="bb" hover-class="none" hover-stop-propagation="false">
子組件傳給父組件的參數值:  	{{paramChildToParentaaa}}
</view>

father.js

data: {
	paramChildToParentaaa: 'default value'   //設置初始值,非必須,可以不設,下面方法中直接更新
},
onMyEvent: function (e) {
	console.log(e)
	//通過事件接收
	this.setData({
		paramChildToParentaaa: e.detail.paramChildToParent  //從e.detail中獲取子組件傳過來的值並更新初始值
	})
},

father.json:

{
	"usingComponents": {
		"maskComponent": "../../components/mask/mask"
	}
}

子組件中定義按鈕用於觸發事件函數

<!--components/mask/mask.wxml-->
<button bindtap='change'>向父組件中傳入參數</button>

// mask.js

/**
* 組件的方法列表
*/
// 子組件的方法需要寫在methods：{}裏面
methods: {
	//觸發change事件向父組件傳值
	change: function () {
	 	// 父組件引用子組件時的方法名 bind:myevent="onMyEvent",傳的參數對象
		this.triggerEvent('myevent', { paramChildToParent: "666傳值成功" });
}
}

JSON文件內容同”父組件向子組件傳參”

兄弟組件傳參:

再創建一個article組件

father.json

{
	"usingComponents": {
		"maskComponent": "../../components/mask/mask",
		"articleComponent": "../../components/article/article"
	}
}

father.wxml

<!-- 兄弟組件傳參:流程：子組件article -> 父組件（中轉站） -> 子組件mask -->
<maskComponent aParamFromBrother="{{toBrother}}"></maskComponent>
<articleComponent bind:getParam="onGetParam"></articleComponent>

father.js

/**
* 頁面的初始數據
*/
data: {
	toBrother: 0
},
onGetParam: function(e) {
	this.setData({
		toBrother: e.detail.paramFromBrother
	})
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
},

article.wxml

<!--components/article/article.wxml-->
<button bindtap="wakeUp">點擊給父組件傳參數,然後傳給我兄弟</button>

article.js

methods: {
	wakeUp: function () {
		this.triggerEvent('getParam', { paramFromBrother: 666 });
}
}

article.json不變

<!--components/mask/mask.wxml-->
<view>
	從我兄弟中拿到的數據是(其實是爸爸給的): {{aParamFromBrother}}
</view>

mask.js

properties: {
	aParamFromBrother: {
		type: Number,//類型
		value: 'default value'//默認值
	}
},

mask.json不變

點擊按鈕:

另一種引用子組件以及獲取組件內屬性/方法的方式: selectComponent

father.wxml

<maskComponent id="maska"></maskComponent>

father.js

onLoad: function (options) {
	// 父組件直接拿子組件數據(不需要觸發事件)
	let comp = this.selectComponent('#maska') //也可以傳遞 .className,但不能傳組件的標籤選擇器,否則null
	console.log(comp);
	// 調用父組件中的haha方法
	console.log(comp.haha()); 
},

mask.wxml

<text id="ooo">
	這是mask中的text組件,用來測試selectComponent的
</text>

mask.js
控制檯:

Template

template中只有 wxml和wxss文件,支持獨立的樣式,但沒有自己的方法,是靜態的,動態數據必須由引用它；
template,在引用的時候需要在引用頁面對應的.wxml和.wxss文件中導入

father.wxml

<!-- 聲明需要使用的模板文件 -->
<import src ="../template/mask/mask.wxml"/>
<!-- 
（1）father.wxml中template 標籤的is屬性與template.wxml中template 標籤的name屬性值相同
（2）father.wxml文件中要通過import標籤聲明需要使用的模板文件
-->
<!-- 
在<data="{{'這是一個參數'}}">中傳多少個參數，對應的template裏就能獲取多少個參數，
傳參的時候要逗號隔開即可，而且傳的必須是一個對象
如：<data="{{obj}}"> 或 <data="{{...obj}}"> 注:第一種寫法在template中引用的時候要寫成 {{obj.參數名}};
第二種寫法直接寫成 {{參數名}}
-->
<template is="mask" data="{{...aaaaa}}"></template>

father.wxss

/**導入模板樣式**/
@import "../template/mask/mask.wxss";
/**......**/

father.js

data: {
	aaaaa: { firstName: Alice, lastName: 'Hu' }
}
alerthello(e){
	console.log('hello!',e);
},

/pages/template/mask/mask.wxml

<!-- 
一個模板文件中可定義多個template,每個template以name屬性進行區分，
在父頁面調用的時候is屬性對應template的name屬性;
 -->
<template name="mask">
	<view class="mask">
		<view class="popUp">
			<!-- 
			當需要爲template中的元素綁定事件函數時,直接用bindtap綁定父頁面js文件中定義的方法即可；
			數據也是直接引用；
			小程序中事件處理函數的參數就是event，不能傳入其他參數...有時候時間函數中需要用到自定義數據,如	循環中對應	的index等(data-index="{{index}}"),以 data-*的形式定義即,取值方	式:e.currentTarget.dataset.abc；
			
			 -->
			<text class="info" bindtap="alerthello" data-abc="abc">這是template中的內容:點我有驚喜哦,{{firstName}},ooo</text>
		</view>
	</view>
</template>

/pages/template/mask/mask.wxss

.mask{
	width: 100%;
	height: 100%;
	/*absolute與fixed，滾動滾動條，元素的位置是否會隨着改變 */
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.8);
	z-index: 99;
	color: #ffffff;
}
.popUp{
	position: absolute;
	top: 10%;
	left: 19%;
	width: 460rpx;
	height: 200rpx;
	background: red;
}