在開發中，很多頁面中會使用相同的元件，這時可以將具有相同資訊的部分封裝成一個元件，方便開發中呼叫。在呼叫中可能會涉及到資料的傳遞問題，例如頁面與元件，元件與元件直接的資料傳遞。

首先看看頁面與元件直接的資料傳遞。

    1. 元件需要獲取頁面傳遞資料， 可以使用元件的屬性來傳遞值

    2. 頁面需要獲取元件中修改的資料， 可以使用元件中的事件觸發頁面中定義的事件來獲取

第一、元件獲取頁面中資料

　　先建立一個自定義元件test-component

<!--components/test-component/test-component.wxml
 
-->
<view>
  <input class='new-name' placeholder='請輸入名字' bindinput="bindInputFunc" value='{{inputValue}}'></input>
  <button class='btn' size='mini' bind:tap='search'>搜尋</button>

  <view>搜尋記錄:</view>
  <block wx:for='{{records}}' wx:for-index="index" wx:for-item
 
="record">
    <view class='record'>{{record}}</view>
  </block>
</view>

第一、在元件test-component.js中定義一個屬性

// components/test-component/test-component.js
Component({
  /**
   * 元件的屬性列表
   */
  properties: {
    namesData: {
      type:Array,
      value:[],
      observer: function
 
 (newVal, oldVal, changedPath) {
        // 屬性被改變時執行的函式（可選），也可以寫成在methods段中定義的方法名字串, 如：'_propertyChange'
        // 通常 newVal 就是新設定的資料， oldVal 是舊資料
        console.log(newVal);
        console.log(oldVal);
        this.setData({records:newVal})
      }
    }
  },

  /**
   * 元件的初始資料
   */
  data: {
    inputValue:'',
    records: []
  },

  /**
   * 元件的方法列表
   */
  methods: {
    //輸入框輸入事件
    bindInputFunc: function (e) {
      this.setData({
        inputValue: e.detail.value
      })
    },

    /**
     * 元件搜尋按鈕事件
     */
    search: function() {
      let records = [...this.data.records];
      records.push(this.data.inputValue);

      this.setData({ records, inputValue: '' })

      this.triggerEvent("search", { records});

      /*
      var myEventDetail = {} // detail物件，提供給事件監聽函式
      var myEventOption = {} // 觸發事件的選項
      this.triggerEvent('myevent', myEventDetail, myEventOption)
      
      觸發事件的選項包括：
          選項名            型別        是否必填        預設值        描述
          bubbles           Boolean       否           false        事件是否冒泡
          composed         Boolean       否           false        事件是否可以穿越元件邊界，為false時，事件將只能在引用元件的節點樹上觸發，不進入其他任何元件內部
          capturePhase      Boolean       否           false         事件是否擁有捕獲階段

       */
      
    }
  }
})

第二、建立一個home頁面，引用自定義元件test-component，就是在home.json中增加一個元件的引用

<test-component namesData='{{names}}' bind:search='homeSearch'></test-component>

// pages/home/home.js
Page({ 
  /**
   * 頁面的初始資料
   */
  data: {
    names:['aaaa','bbbb','cccc']
  },
/**
   * 搜尋的點選事件
   */
  homeSearch: function(e) {
    console.log(e.detail); // 自定義元件觸發事件時提供的detail物件
  }
 
})