小程序開發-6-組件數據、事件與屬性

組件數據、事件與屬性

數據來源的三種途徑

• 直接在wxml中填寫數據
• 在js中綁定數據
• 服務器中傳數據到js，然后填入wxml

---

數據綁定

//在js中
data:{
 count: 99
}

在wxml中
<View>{{count}}</View>

---

三元表達式和圖片切換

<image src="{{like?'image/like.png':'image/dislike.png'}}"/>

---

組件的封閉性、開放性及粒度

組件封裝的難度

• 哪些在內部，哪些可以放在外部
• 組件的粒度，可以封裝簡單功能或非常復雜的功能

---

組件的properties屬性詳解

properties: {
like: {
  type: Boolean,//類型必填,Number，String,Boolean，Object,Array,null(任意類型)
	value: false, //默認值,可以不填，boolean類型的默認值為false
	observer: function(){} //當傳入的值改變的時候，微信小程序會重新執行
}
}

注意：properties可以在wxml中用{{}}來綁定，和data類似

---

let var 與組件事件應用

可以用this.properties.like獲取properties中的like的值

let允許你聲明一個作用域被限制在塊級中的變量、語句或表達式。與var關鍵字不同的是，他申明的變量只能是全局或者整個函數塊的

if(true){
	let a = 1;
 let b = 2;
}
console.log(b);//2
console.log(a);//報錯