小程式 子元件傳值

2022-03-20 19:35:32 字數 2633 閱讀 4798

需求,把a子元件的值傳給父元件,在通過父元件傳給子元件接收

a子元件

元件間的基本通訊方式有以下幾種。

事件系統是元件間通訊的主要方式之一。自定義元件可以觸發任意的事件,引用元件的頁面可以監聽這些事件。關於事件的基本概念和用法,參見 事件 。

監聽自定義元件事件的方法與監聽基礎元件事件的方法完全一致:

**示例:

-tag-name bindmyevent="onmyevent" />

-tag-name bind:myevent="onmyevent" />

page(

})

自定義元件觸發事件時,需要使用triggerevent方法,指定事件名、detail物件和事件選項:

**示例:

在開發者工具中預覽效果

="ontap">點選這個按鈕將觸發「myevent」事件

component(,

methods: // detail物件,提供給事件監聽函式

var myeventoption = {} // 觸發事件的選項

this.triggerevent('myevent', myeventdetail, myeventoption)

}}})

觸發事件的選項包括:

型別是否必填

預設值描述

bubbles

boolean

否false

事件是否冒泡

composed

boolean

否false

事件是否可以穿越元件邊界,為false時,事件將只能在引用元件的節點樹上觸發,不進入其他任何元件內部

capturephase

boolean

否false

事件是否擁有捕獲階段

**示例:

在開發者工具中預覽效果

// 頁面 page.wxml

-component bindcustomevent="pageeventlistener1">

-component bindcustomevent="pageeventlistener2">

// 元件 another-component.wxml

="anothereventlistener">

/>

// 元件 my-component.wxml

="myeventlistener">

/>

// 元件 my-component.js

component() // 只會觸發 pageeventlistener2

this.triggerevent('customevent', {}, ) // 會依次觸發 pageeventlistener2 、 pageeventlistener1

this.triggerevent('customevent', {}, ) // 會依次觸發 pageeventlistener2 、 anothereventlistener 、 pageeventlistener1

// 說人話

// 首先小程式在父元件中,通過引用子元件(或者說元件)之後,通過屬性item,index;把組元件中的資料,

// 傳值到子元件之後,子元件在properties中接收到值;

// 然後子元件通過自身的事件,比如catchtap="listtap"方法,啟用自定義事件

// 接著子元件可以通過第二個引數,進行傳值到父元件中,就把子元件中的index傳給了父元件中

// 說人話

// 首先小程式在父元件中,通過引用子元件(或者說元件)之後,通過屬性item,index;把組元件中的資料,

// 傳值到子元件之後,子元件在properties中接收到值;

// 然後子元件通過自身的事件,比如catchtap="listtap"方法,啟用自定義事件

// 接著子元件可以通過第二個引數,進行傳值到父元件中,就把子元件中的index傳給了父元件中

小程式 父元件向子元件傳值

1.首先需要在父元件中呼叫子元件,並在子元件的屬性中寫上傳值的資料 這是父元件的wxml介面,其中find all teachers為子元件,分別傳值teacher list find all teachers 2.在子元件的find all teachers.json中加入 component t...

小程式元件傳值和父元件呼叫子元件事件

usingcomponents 在需要用到元件的地方直接呼叫就可以了 父元件的html fathertest.html 父元件js fathertest.js page 子元件定義 子元件testelement.wxml 這裡面畫自己的頁面,使用父元件傳來的值 接受父元件傳過來的值 componen...

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

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