wepy元件子父傳值 wepy元件間傳值

2021-10-13 14:02:32 字數 1648 閱讀 3818

普通元件引用

當頁面需要引入元件,或元件需要引入子元件時,必須在.wpy檔案的

import wepy from 'wepy';

import child from '../components/child'; // 引入元件檔案

export default class index extends wepy.component , ]

元件的computed屬性

computed計算屬性,是乙個有返回值的函式,可直接被當作繫結資料來使用。類似於data屬性。示例如下:

data = }來插值

computed = -> $`)

props傳值

在wepy中屬於父子元件之間傳值的一種機制,包括靜態傳值與動態傳值。

1、靜態傳值

父元件向子元件傳遞常量資料,只能傳遞string。

做法:在父元件template模板部分的元件標籤中,使用子元件props物件中所宣告的屬性名,作為其屬性名來接收父元件傳遞的值。

示例://* 父元件 template模板部分

//*子元件 childcom.wpy中

props = ;

data = {};

// 宣告

events = receive $ from $`);

// 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

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)

// child.wpy

click me

import wepy from 'wepy'

export default class child extends wepy.component {

methods = {

tap () {

console.log('child is clicked')

this.$emit('childfn', 100)

slot 元件內容分發插槽

wepy元件子父傳值 wepy 元件通訊與互動

wepy.component基類提供三個方法 broadcast,emit,invoke,因此任一頁面或任一元件都可以呼叫上述三種方法實現通訊與互動,如 this.emit some event 1,2,3,4 元件的事件監聽需要寫在events屬性下,如 import wepy form wepy...

react 父元件傳值子元件,子元件傳值孫元件

import react from react import reacttypes from prop types 最外層的父元件 export default class com1 extends react.component render 中間的子元件 class com2 extends r...

子元件傳值給父元件

原理 在父元件引用子元件時,通過事件繫結機制把乙個方法aaaa的引用傳給子元件,這個方法中可以有各種引數,子元件在觸發自己的函式或者某些資料發生變化時,觸發 事件繫結機制繫結的函式,通過引數的方式將要傳的值傳過來,父元件中處理,也就接到了子元件的值 最開始父元件本身有乙個方法 fathermetho...