亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

微信小程序父子組件傳值的方法是什么

小億
250
2023-11-04 12:49:37
欄目: 云計算

微信小程序父子組件之間傳值可以通過以下幾種方法實現:

  1. 屬性傳值:在父組件中通過屬性的方式將數據傳遞給子組件,在子組件的properties屬性中定義對應的屬性名,然后在子組件中通過this.properties獲取傳遞過來的值。

父組件中的wxml代碼:

<child-component value="{{value}}"></child-component>

父組件中的js代碼:

Page({
  data: {
    value: 'Hello World'
  }
})

子組件中的js代碼:

Component({
  properties: {
    value: {
      type: String,
      value: ''
    }
  },
  methods: {
    getValue() {
      console.log(this.properties.value); // 輸出:Hello World
    }
  }
})
  1. 事件傳值:子組件通過triggerEvent方法觸發一個自定義事件,并將需要傳遞的值作為參數傳遞給父組件,在父組件中監聽該事件,獲取傳遞過來的值。

父組件中的wxml代碼:

<child-component bind:myevent="handleEvent"></child-component>

父組件中的js代碼:

Page({
  handleEvent(event) {
    console.log(event.detail); // 輸出:Hello World
  }
})

子組件中的js代碼:

Component({
  methods: {
    sendValue() {
      this.triggerEvent('myevent', 'Hello World');
    }
  }
})
  1. 全局傳值:使用getApp方法獲取小程序實例,在實例中定義一個全局變量,通過該全局變量在父子組件之間進行數據傳遞。

父組件中的js代碼:

const app = getApp();

Page({
  data: {
    value: ''
  },
  onLoad(options) {
    app.globalData.value = 'Hello World';
  },
  getValue() {
    console.log(app.globalData.value); // 輸出:Hello World
  }
})

子組件中的js代碼:

const app = getApp();

Component({
  methods: {
    getValue() {
      console.log(app.globalData.value); // 輸出:Hello World
    }
  }
})

以上是三種常見的父子組件傳值的方法,根據具體需求選擇合適的方式進行數據傳遞。

0
达拉特旗| 邵东县| 鸡泽县| 绥江县| 金山区| 锦州市| 麻阳| 巫山县| 乐安县| 丽水市| 宽甸| 卫辉市| 昆明市| 江源县| 屯昌县| 若尔盖县| 乌兰县| 牡丹江市| 兰考县| 株洲县| 鹤山市| 东源县| 凤台县| 杭锦后旗| 拜城县| 遵义县| 清远市| 赣州市| 伊春市| 荃湾区| 大足县| 霍林郭勒市| 道孚县| 武乡县| 六盘水市| 平潭县| 陆河县| 通河县| 周至县| 望都县| 湛江市|