普通組件引用

當頁面需要引入組件，或組件需要引入子組件時，必須在.wpy文件的<script>部分先import組件文件，然後在components對象中給組件聲明唯一的組件ID；接著在<template>模板部分中，添加以組件ID進行命名的自定義標簽，以插入組件。

<template>
<!-- 以`<script>`腳本部分中所聲明的組件ID為名命名自定義標簽，從而在`<template>`模板部分中插入組件 -->
<child></child>
</template>

<script>
import wepy from ‘wepy‘;
import Child from ‘../components/child‘; // 引入組件文件

export default class Index extends wepy.component {

components = {
child: Child // 聲明組件，分配組件id為child
};
}
</script>

組件ID

WePY中的組件都是靜態組件，是以組件ID作為唯一標識的，每一個ID都對應一個組件實例。當頁面引入兩個相同ID的組件時，這兩個組件共用同一個實例與數據，當其中一個組件數據變化時，另外一個也會一起變化。
如需避免這個問題，則需要分配多個組件ID和實例。代碼如下：

<template>
<view class="child1">
<child></child>
</view>

<view class="child2">
<anotherchild></anotherchild>
</view>
</template>

<script>
import wepy from ‘wepy‘;
import Child from ‘../components/child‘;

export default class Index extends wepy.component {
components = {
//為兩個相同組件的不同實例分配不同的組件ID，從而避免數據同步變化的問題
child: Child,
anotherchild: Child
};
}
</script>

組件的循環渲染
當需要循環渲染WePY組件時，須使用WePY定義的輔助標簽<repeat>，示例如下：
<template>
<!-- 註意，使用for屬性，而不是使用wx:for屬性 -->
<repeat for="{{list}}" key="index" index="index" item="item">
<!-- 插入<script>腳本部分所聲明的child組件，同時傳入item -->
<child :item="item"></child>
</repeat>
</template>

<script>
import wepy from ‘wepy‘;
import Child from ‘../components/child‘; // 引入child組件文件

export default class Index extends wepy.component {
components = {
child: Child
}

data = {
list: [{id: 1, title: ‘title1‘}, {id: 2, title: ‘title2‘}]
}
}
</script>

組件的computed屬性
computed計算屬性，是一個有返回值的函數，可直接被當作綁定數據來使用。類似於data屬性。示例如下：
data = {
aaa: 1
}

// 計算屬性aPlus，在腳本中可通過this.aPlus來引用，在模板中可通過{{ aPlus }}來插值
computed = {
aPlus () {
return this.aaa + 1
}
}

watcher監聽器
通過監聽器watcher，能夠監聽到任何屬性的更新。監聽器在watch對象中聲明，類型為函數，函數名與需要被監聽的data對象中的屬性同名，每當被監聽的屬性改變一次，監聽器函數就會被自動調用執行一次。

監聽器適用於當屬性改變時需要進行某些額外處理的情形。

示例：
data = {
num: 1
}

// 監聽器中的監聽函數名，必須與其對應的屬性名一樣
// 參數newValue為屬性改變後的新值，oldValue為改變前的舊值
watch = {
num (newValue, oldValue) {
console.log(`num value: ${oldValue} -> ${newValue}`)
}
}

props傳值
在WePY中屬於父子組件之間傳值的一種機制，包括靜態傳值與動態傳值。
1、靜態傳值
父組件向子組件傳遞常量數據，只能傳遞String。
做法：在父組件template模板部分的組件標簽中，使用子組件props對象中所聲明的屬性名，作為其屬性名來接收父組件傳遞的值。
示例：
//* 父組件 template模板部分
<childCom title="mytitle"></childCom >

//*子組件 childCom.wpy中
props = {
title: String
};

onLoad () {
console.log(this.title); // 輸出 “mytitle”
}

2、動態傳值
指父組件向子組件傳遞動態數據內容，父子組件數據完全獨立互不幹擾。

-可以通過.sync修飾符，來達到父組件數據綁定至子組件的效果；
-也可以通過設置子組件props的twoWay: true，來達到子組件數據綁定至父組件的效果；
-如果既使用.sync修飾符，同時子組件props中添加的twoWay: true時，就可以實現數據的雙向綁定了。
-在父組件template模板部分所插入的子組件標簽中，使用:prop屬性，來進行動態傳值。

// parent.wpy

<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>

data = {
parentTitle: ‘p-title‘
};

// child.wpy

props = {
// 靜態傳值
title: String,

// 父向子單向動態傳值
syncTitle: {
type: String,
default: ‘null‘
},

twoWayTitle: {
type: Number,
default: ‘nothing‘,
twoWay: true
}
};

組件通信與交互
wepy.component基類提供$broadcast、$emit、$invoke三個方法，用於組件之間的通信和交互。有關的事件處理函數，需要寫在組件和頁面的events對象中聲明。

$broadcast
事件是由父組件發起，所有子組件都會收到此廣播事件，除非事件被手動取消。

$emit
由某個子組件發起，其所有祖先組件會依次接收到$emit事件。

示例
this.$emit(‘some-event‘, 1, 2, 3, 4);
import wepy from ‘wepy‘

export default class Com extends wepy.component {
components = {};

data = {};

// 聲明
events = {
‘some-event‘: (p1, p2, p3, $event) => {
console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`);
}
};
// Other properties
}

$invoke
是一個頁面或組件，直接調用另一個組件的方法。通過傳入組件路徑找到相應的組件，然後再調用其方法。

比如：
-想在頁面Page_Index中，調用組件ComA的某個方法：
this.$invoke(‘ComA‘, ‘someMethod‘, ‘someArgs‘);
-想在組件ComA中，調用組件ComG的某個方法：
this.$invoke(‘./../ComB/ComG‘, ‘someMethod‘, ‘someArgs‘);
組件自定義自己的事件處理函數
使用.user修飾符，為自定義組件 綁定事件。

如：@customEvent.user="myFn"
其中，@表示事件修飾符，customEvent 表示事件名稱，.user表示事件後綴。

示例:
// page.wpy

<template>
<child @childFn.user="parentFn"></child>
</template>

<script>
import wepy from ‘wepy‘
import Child from ‘../components/child‘

export default class Index extends wepy.page {
components = {
child: Child
}

methods = {
parentFn (num, evt) {
console.log(‘parent received emit event, number is: ‘ + num)
}
}
}
</script>

// child.wpy

<template>
<view @tap="tap">Click me</view>
</template>

<script>
import wepy from ‘wepy‘

export default class Child extends wepy.component {
methods = {
tap () {
console.log(‘child is clicked‘)
this.$emit(‘childFn‘, 100)
}
}
}
</script>

slot 組件內容分發插槽

作者：Arthur淩
鏈接：https://www.jianshu.com/p/e30436ba773f
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並註明出處。

wepy組件間傳值