アプレットの親子コンポーネントは値を渡し、メソッドを呼び出し、オブザーバーはコンポーネント データの変更を監視します (イメージ コンポーネントのカプセル化)。

---

1. 親コンポーネントが子コンポーネントに値を渡します (画像コンポーネントのカプセル化)

親コンポーネントから値を渡す

// index.wxml
<imgModule src="{
    
    {imgSrc}}"></imgModule>

// index.js
Page({
    
    
  data: {
    
    
    imgSrc: "http://...jpg"
  },
})

// index.json
{
    
    
  "usingComponents": {
    
    
    "imgModule":"/components/global/image/index"
  }
}

サブコンポーネントは受信します

// components/global/image/index.wxml
<image src="{
     
     {imgSrc}}" />

// components/global/image/index.js
Component({
    
    
  /**
   * 组件的属性列表
   */
  properties: {
    
    
    src: {
    
    
      type: String,
      value: "",
      // observer数据监听，监听src变化获取图片临时路径
      observer(nv, ov, path) {
    
    
        if (nv) {
    
    
          // 显示图片
          wx.downloadFile({
    
    
            header: {
    
    
              'cookie': wx.getStorageSync("Set-Cookie")
            },
            url: nv,
            success: (res) => {
    
    
              this.setData({
    
    
                imgSrc: res.tempFilePath
              })
            }
          })
        }
      }
    }
  },
})

---

2. 子コンポーネントは親コンポーネントの関数を呼び出し、値を親コンポーネントに渡します。

// 子组件
this.triggerEvent("gotoDetail", {
    
    id:"id"})

// 父组件
<newsList id="newsList" bindgotoDetail="handleGotoNewsDetail"></newsList>

---

3. 親コンポーネントが子コンポーネントの値と関数を呼び出します。

// 父组件
<newsList id="newsList" listArr="{
     
     {culturalList}}" bindgotoDetail="handleGotoNewsDetail"></newsList>

// 父组件直接获取子组件的数据
this.selectComponent('#newsList')
this.selectComponent('#newsList').gotoDetailById() // 父组件调子组件的函数 
this.selectComponent('#newsList').data.listArr // 父组件调子组件的值