微信小程序の親コンポーネントから子コンポーネントに値を渡す方法は？

2年 ago
綾乃, 一希
1 minute

微信小程序で親コンポーネントと子コンポーネント間で値を渡すには、以下の方法があります。

  1. 親コンポーネントで`props`を通じて子コンポーネントにデータを渡す場合、子コンポーネントの`props`プロパティで対応するプロパティ名を定義し、`this.props`から渡された値を取得します。

親コンポーネント内の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
    }
  }
})

父子コンポーネント間のデータ伝達の一般的な3つの方法は以上です。特定のニーズに基づいて、適切な方法を選択してデータを送信してください。

bannerAds