简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  WeChat アプレット  >  ミニプログラム開発におけるコンポーネント間の値の受け渡し方法（コード例）

ミニプログラム開発におけるコンポーネント間の値の受け渡し方法（コード例）

不言
不言転載
2018-12-15 09:52:339706ブラウズ

この記事の内容は、小さなプログラムの開発におけるコンポーネント間の値の転送方法 (コード例) に関するものです。必要な方は参考にしていただければ幸いです。 。

1. コンポーネントの作成

WeChat 開発者ツールを開き、wxml、wxss、js、json

Wxml 内に次の 4 つのファイルが生成されます。 # #

<view>我是组件A</view>
In js:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {
  
  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
   
  }

})
In json:

{
  "component": true,
  "usingComponents": {}
}
つまりコンポーネントの作成は完了です

2.コンポーネントを導入します

インデックスへ コンポーネントがindex.json: 

{
  "usingComponents": {
    "componentA": "../../components/child1/child1"
  }
}
に導入されている場合、index.wxml: 

<view>
    <view>微信小程序组件传参</view>
    <componentA />
</view>
、コンポーネントを表示できます。 コンポーネントをインポートするには、まずコンポーネントを定義する必要があります。 wxml

3. 親コンポーネントは子コンポーネントにパラメータを渡します。

#宣言: 次のように、A コンポーネントが親コンポーネント、B コンポーネントが子コンポーネントです。コンポーネント A はコンポーネント B にパラメータを渡します:

コンポーネント B をコンポーネント A

コンポーネント A の json に書き込みます: 

{
  "component": true,
  "usingComponents": {
    "componentB": "../child2/child2"
  }
}
の wxmlコンポーネント A、次のように記述します: 

<view>我是组件A</view>

   子组件内容：
   

コンポーネント B の JS で、次のように記述します: 

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {

  }

})

つまり、プロパティでコンポーネント A によって渡されるパラメーターの型を定義します

Write B コンポーネントの wxml 内: 

<view style=&#39;border:2px solid gray;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
</view>

概要:

実際、B コンポーネントが A コンポーネントに導入されると、属性が渡されます。それに値を割り当てると、B コンポーネントはこの属性名 paramAtoB

4 を通じてその値を取得します。子コンポーネントは親コンポーネントにパラメータを渡します。ステートメント: A コンポーネントは親コンポーネントです。 、および B コンポーネント サブコンポーネントとして、B コンポーネントがパラメータを A コンポーネントに渡す方法は次のとおりです。

サブコンポーネントが親コンポーネントにパラメータを渡すには、最初にトリガー イベントを追加する必要があります。次のように、親コンポーネントがサブコンポーネントを導入するとき:

親コンポーネント内では、wxml:

<view style=&#39;padding:20px;border:2px solid red;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件A</view>
<view>
   <view>A组件内容：</view>
   <view>B组件传入参数：{{paramBtoA}}</view>
   <componentB paramAtoB=&#39;我是A向B中传入的参数&#39; bind:myevent="onMyEvent"/>
</view>

</view>

myevent がバインドされたトリガー イベントです。 親コンポーネント A js: の 

Component({

  behaviors: [],

  properties: {
   
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    onMyEvent:function(e){
      this.setData({
        paramBtoA: e.detail.paramBtoA
      })
    }
  }

})

onMyEvent は、サブコンポーネントによってトリガーされたときの関数です。

サブコンポーネント B の wxml:

<view style=&#39;border:2px solid gray;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
  <button bindtap=&#39;change&#39;>向A中传入参数</button>
</view>

ボタン クリック イベントがトリガーされるとすぐに、パラメーターを親コンポーネント A に渡すことができます。子コンポーネント B では、js:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    change:function(){
      this.triggerEvent('myevent', { paramBtoA:123});
    }
  }

})

this.triggerEvent がイベントの後に実行されます。ボタンをクリックすると、myevent イベントがトリガーされます。パラメータ paramBtoA を親コンポーネントに渡します

Column

    Li Sanzang

    2. 記事の詳細






                                                                    

李三宗                                                                                                 ポストする                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 2日前に投稿 ミニプログラム開発におけるコンポーネント間の値の受け渡し方法（コード例）【小規模プログラム開発】コンポーネント間での値の受け渡し

小規模プログラム

読む                                                             読むのに10分かかります                                                   

#                                                                                 

                                                                                                                                                                                                                                                                                                                                                                                  [ミニプログラム開発] コンポーネント間での値の受け渡し1. コンポーネントの作成WeChat 開発者ツールを開きます。 , コンポーネントを作成すると、wxml、wxss、js、json

In wxml: 

<view>我是组件A</view>

In js: 

Component({

  behaviors: [],

  properties: {
   
  },
  data: {
  
  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
   
  }

})

In json: 

{
  "component": true,
  "usingComponents": {}
}
# の 4 つのファイルが生成されます。 ##つまり、コンポーネントの作成は完了です

2. コンポーネントを導入します

コンポーネントをインデックスに導入するには、

index.json:

を実行します。 

{
  "usingComponents": {
    "componentA": "../../components/child1/child1"
  }
}
index.wxml 内: 

<view>
    <view>微信小程序组件传参</view>
    <componentA />
</view>
これでコンポーネントを表示できるようになります。コンポーネントを導入するには、wxml

3 で表示できるようにする前に、まずコンポーネントを json で定義する必要があります。親コンポーネントが子コンポーネントにパラメータを渡します。

宣言: A コンポーネントが親コンポーネントであり、B コンポーネントが子コンポーネントです。次は、コンポーネント A がコンポーネント B にパラメータを渡す方法です。

コンポーネント A に B コンポーネントを導入します

A コンポーネントの json に書き込みます: 

{
  "component": true,
  "usingComponents": {
    "componentB": "../child2/child2"
  }
}
A コンポーネントの wxml に書き込みます: 

<view>我是组件A</view>

   子组件内容：
   

js 内B コンポーネントの記述: 

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {

  }

})
つまり、コンポーネント A から渡すパラメータの型をプロパティに定義します

コンポーネント B の wxml に記述: 

<view style=&#39;border:2px solid gray;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
</view>

概要:

実際、A コンポーネントは B コンポーネントにパラメータを渡します。B コンポーネントが A コンポーネントに導入されると、属性 paramAtoB が渡され、それに値が割り当てられます。その後、B コンポーネントはこの属性名を通じてその値を取得します。 paramAtoB.

4. サブコンポーネントが親コンポーネントにパラメータを渡す

宣言: A コンポーネントが親コンポーネントであり、B コンポーネントがサブコンポーネントである方法は次のとおりです。

子コンポーネントから親コンポーネントにパラメータを渡すには、次のように、親コンポーネントが子コンポーネントを導入するときに、まずトリガー イベントを追加する必要があります。コンポーネント A wxml:

<view style=&#39;padding:20px;border:2px solid red;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件A</view>
<view>
   <view>A组件内容：</view>
   <view>B组件传入参数：{{paramBtoA}}</view>
   <componentB paramAtoB=&#39;我是A向B中传入的参数&#39; bind:myevent="onMyEvent"/>
</view>

</view>

myevent はバインドされたトリガー イベントです。

親コンポーネント A では、js:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    onMyEvent:function(e){
      this.setData({
        paramBtoA: e.detail.paramBtoA
      })
    }
  }

})

onMyEvent が子コンポーネントによってトリガーされたときの関数

サブコンポーネント B では、wxml:

<view style=&#39;border:2px solid gray;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
  <button bindtap=&#39;change&#39;>向A中传入参数</button>
</view>
ボタン クリック イベントがトリガーされるとすぐに、パラメーターを親に渡すことができますサブコンポーネント B では、js:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    change:function(){
      this.triggerEvent('myevent', { paramBtoA:123});
    }
  }

})

this.triggerEvent はボタンがクリックされた後に実行されるイベントで、myevent イベントをトリガーし、パラメーター paramBtoA を親コンポーネントに渡します

## ＃＃報告＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

#興味があるかもしれません

  • ミニプログラム開発におけるコンポーネント間の値の受け渡し方法（コード例）

    • ＃＃＃コメント＃＃＃                                                                                            時間順に並べ替え

コメントをさらに表示


## ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

以上がミニプログラム開発におけるコンポーネント間の値の受け渡し方法（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：WeChat アプレットの 10 リクエスト同時実行制限の最適化ニュース! ！ ！次の記事：WeChat アプレットの 10 リクエスト同時実行制限の最適化ニュース! ！ ！

関連記事

続きを見る