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

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

李三宗 ポストする 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 を親コンポーネントに渡します

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

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