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

不言
リリース: 2018-12-15 09:52:33
転載
9740 人が閲覧しました

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

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






                                                                    

小規模プログラム

読む                                                             読むのに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 までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!