支付寶小程序框架 自定義組件·對象

Component 構造器

以下為一個簡單示例：

// /components/index/index.js
Component({
  mixins:[{ didMount() {}, }],
  data: {y:2},
  props:{x:1},
  didUpdate(prevProps,prevData){},
  didUnmount(){},
  methods:{
    onMyClick(ev){
      my.alert({});
      this.props.onXX({ ...ev, e2:1});
    },
  },
});

注意：onInit、deriveDataFromProps 僅支持在基礎庫 1.14.0 版本及以上使用，可調用 my.canIUse('component2') 實現兼容，并且，需要在 IDE 中的 詳情 > 項目配置 中，勾選 component2。

參數說明

methods

自定義組件不僅可以渲染靜態(tài)數據，也可以響應用戶點擊事件，進而處理并觸發(fā)自定義組件重新渲染。methods 中可以定義任意自定義方法。

注意： 與 Page 不同，自定義組件需要將事件處理函數定義在 methods 中。

<!-- /components/index/index.axml -->
<view>{{counter}}</view>
<button onTap="plusOne">+1</button>
// /components/index/index.js
Component({
  data: { counter: 0 },
  methods: {
    plusOne(e) {
      console.log(e);
      this.setData({ counter: this.data.counter + 1 });
    },
  },
});

頁面會渲染一個按鈕，每次點擊它頁面的數字都會加 1。

props

自定義組件可以接受外界的輸入，做完處理之后，還可以通知外界說：我做完了。這些都可以通過 props 實現。

注意：

• props 為外部傳過來的屬性，可指定默認屬性，不能在自定義組件內部代碼中修改。
• 自定義組件的 axml 中可以直接引用 props 屬性。
• 自定義組件的 axml 中的事件只能由自定義組件的 js 的 methods 中的方法來響應， 如果需要調用父組件傳遞過來的函數，可以在 methods 中通過 this.props 調用。

// /components/index/index.js
Component({
  data: { counter: 0 },
  // 設置默認屬性
  props: {
    onCounterPlusOne: (data) => console.log(data),
    extra: 'default extra',
  },
  methods: {
    plusOne(e) {
      console.log(e);
      const counter = this.data.counter + 1;
      this.setData({ counter });
      this.props.onCounterPlusOne(counter); // axml中的事件只能由methods中的方法響應
    },
  },
});

以上代碼中 props 設置默認屬性，然后在事件處理函數中通過 this.props 獲取這些屬性。

<!-- /components/index/index.axml -->
<view>{{counter}}</view>
<view>extra: {{extra}}</view>
<button onTap="plusOne">+1</button>

外部使用不傳遞 props

<!-- /pages/index/index.axml -->
<my-component />

頁面輸出：

0
extra: default extra
+1

此時并未傳遞參數，所以頁面會顯示組件 js 中 props 設定的默認值。

外部使用傳遞 props

注意： 外部使用自定義組件時，如果傳遞參數是函數，一定要以 on 為前綴，否則會將其處理為字符串。

// /pages/index/index.js
Page({
  onCounterPlusOne(data) {
    console.log(data);
  },
});
<!-- /pages/index/index.axml -->
<my-component extra="external extra" onCounterPlusOne="onCounterPlusOne" />

頁面輸出：

0
extra: external extra
+1

此時傳遞了參數，所以頁面會顯示外部傳遞的 extra 值 external extra 。

組件實例屬性

以下為一個簡單示例：

// /components/index/index.js
Component({
  didMount(){
    this.$page.xxCom = this; // 通過此操作可以將組件實例掛載到所屬頁面實例上
    console.log(this.is);
    console.log(this.$page);
    console.log(this.$id);
  }
});
<!-- /components/index/index.axml 組件 id 可直接在組件 axml 中渲染值 -->
<view>{{$id}}</view>
// /pages/index/index.js
Page({
  onReady() {
    console.log(this.xxCom); // 可以訪問當前頁面所掛載的組件
  },
});

當組件在頁面上渲染后，執(zhí)行 didMount 回調，控制臺輸出如下：

/components/index/index
{$viewId: 51, route: "pages/index/index"}
1

組件實例方法

具體使用方式同 頁面。