Uniapp開發小程式中，如何撰寫自訂元件(component)並實作傳值

我們在做uni專案開發的時候，常常會遇到要使用一些通用的模組，例如一個彈跳窗，一組按鈕，如果每個頁面重複編寫，例如會耗費很大的時間，也不利於系統的維護和管理，所以我們有必要把它寫成一個通用的模組，以實現任意呼叫的目的。

所有的元件都會被定義在components目錄下，如果您新建的專案中沒有這個目錄，也可以自己創建，如下就是一個被定義好的元件(shopwind-multpicker)結構:

components/
  shopwind-multpicker/
  shopwind-multpicker.js
shopwind-multpicker.vue
pages/
static/
App.vue

每個元件就是一個資料夾，定義好元件之後，我們就可以在視圖（vue）中調用，程式碼範例如下：

<shopwind-multpicker :title="title" idField="region_id" nameField="region_name" parentField="parent_id" :selected="selected" @confirm="confirm"></shopwind-multpicker>

這樣就完成了一個元件的顯示，那麼我們如何將元件的值傳到父頁面的，可以透過在元件（shopwind-multpicker.vue）檔案中使用this.$emit 方法：

// 组件的vue文件
this.$emit('confirm', '返回父页面的结果集')

然後在父頁面中，你需要定義跟emit第一個參數名稱一致的方法（這裡為：confirm）來接收字組件的回傳結果，這個方法定義在methods中

// 父页面的vue文件
export default {
  data() {
    return {}
  },
  methods: {
    confirm(result) {
      // 这里可以获取您选择后返回的数据
      console.log(result)
    }
  }
}

這樣就完成了一個父子頁面的傳值，本例中使用了shopwind-multpicker 元件，該元件是一個支援三級連動的插件，例如地區聯動，分類聯動，可以支援任意模型的三級連動，該外掛程式已經發佈到Dcloud插件市場，有需要的可以到插件市場免費下載使用：通用型封裝三級連動，可支援任意模型（如地區連動，分類連動） - DCloud 外掛程式市場

#

以上是Uniapp開發小程式中，如何撰寫自訂元件(component)並實作傳值的詳細內容。更多資訊請關注PHP中文網其他相關文章！