アプレットページとコンポーネント間の相互パラメータ転送

まず、暗黙のルールとして知っておくべきことは、イベントをコンポーネントに書き込むのではなく、ページにイベントを書き込むことです。

1. 親から子への受け渡し (ページがコンポーネントにパラメーターを渡します)

1.wxml ページ:

/* 引用组件 */
<toast list='{
   
   {list}}'></toast>

  最初のリストはパラメータを受け取るコンポーネントで、2 番目のリストは渡す値です。

2. サブコンポーネントは以下を受け取ります。

        

/**
 * 组件的属性列表
 */
 properties: {
   list: {
     type: Object,
     value: {}
  }
},

  type はパラメータのタイプです。例: (arrary、number、string、function、object) 値がない場合、値は空です。

2. 子から親への受け渡し (コンポーネントはページにパラメータを渡します)

1. サブコンポーネント:

<view class="btn-confirm" bindtap="onConfirm" data-index="{
   
   {list.index}}">{
   
   {list.confirmText}}</view>

    

/**
 * 子组件向父组件传值
 */
onConfirm: function (e) {
   const index = e.currentTarget.dataset.index
   // confirm为父组件接收的事件名
   this.triggerEvent('confirm', {index})
}

2. ページは、コンポーネントによって渡された値を受け取ります。

// bind:confirm bind后面必须跟组件那边起的名称
<toast list='{
   
   {list}}' bind:confirm='confirm'></toast>

 js:

// 接收子组件传递过来的参数
confirm(e) {
    // 打印传的值
    console.log(e.detail)
},

3. 失敗した場合

1.ページのJSON参照コンポーネントのパスが正しいかどうかを確認します

{
  "usingComponents": {
    "toast": "/components/toast/index",
  }
}

 2. jsonのコンポーネントがtrueかどうかを確認する

{
    "component": true
}

おすすめ

転載: blog.csdn.net/m0_71349739/article/details/128531553