小程序中Component組件怎么使用？下面本篇文章給大家分享一下小程序自定義組件Component超全實(shí)用指南，希望對大家有所幫助！

在小程序中，想要將頁面內(nèi)的功能模塊抽象出來，在不同的頁面中重復(fù)使用，我們可以使用它的自定義組件，自定義組件可以將復(fù)雜的頁面拆分成多個(gè)低耦合的模塊，這樣不僅使用起來方便，而且還有助于我們的代碼維護(hù)。【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

前言

本文你將收獲

• 小程序如何使用自定義組件

• 自定義組件之間的各種傳值

• 自定義組件中插槽的使用

• 排雷，本文的小程序指的是微信小程序（不過其他的小程序思路應(yīng)該差不多）

• 排雷，本文主要內(nèi)容是自定義組件的各種用法，不是教大家怎么封裝組件哈！

基礎(chǔ)準(zhǔn)備（可忽略）

新增文件夾

首先在根目錄下創(chuàng)建一個(gè)專門放自定義組件的文件夾（文件夾名稱任意，位置也任意）

新建Component文件

然后在小程序編輯器里，右鍵，新建Component

為什么要特意說這一步呢？

不知道有沒有小伙伴們和我一樣一直只把小程序開發(fā)工具當(dāng)預(yù)覽工具用，然后開發(fā)是用其他編輯器的。

后面發(fā)現(xiàn)直接在小程序新建Component或者Page，它會一口氣把四個(gè)文件都建好，并且內(nèi)容模板也會填好，所以現(xiàn)在開發(fā)者工具除了預(yù)覽，我還用它新建文件。

示例背景說明

我們后面就以類似下圖中的模塊分割標(biāo)題為例寫一個(gè)簡單的組件示例（只是瞎舉例）

怎么引入自定義組件？

創(chuàng)建不多說，如以上【新建Component文件】即可，如果是自己手動創(chuàng)建，別忘了在json文件聲明（小程序開發(fā)工具新建的默認(rèn)就有）

{   "component": true }

引入組件方法

在頁面的 json 文件中進(jìn)行引用聲明

<!-- 引用組件的json文件 --> {   "usingComponents": {     "x-title": "/components/title/title"   } }

在頁面的 wxml 中像使用基礎(chǔ)組件一樣使用自定義組件（名字和聲明的保持一致）

<!-- 引用組件的wxml文件 --> <x-title></x-title>

怎么傳值？

父組件給子組件傳值

可以看到我們上面把標(biāo)題的內(nèi)容寫死了，但是實(shí)際中使用我們肯定是需要根據(jù)不同的模塊，傳入不同的標(biāo)題內(nèi)容，這樣我們就需要使用到父子之間的傳值了。

父級給子級傳值

<!-- 父級wxml --> <x-title titleText="全部訂單"></x-title>  <!-- 如果父級的值是一個(gè)變量則 --> <x-title titleText="{{currentTitle}}"></x-title>

子級接收父級傳過來的值

<!-- 子級js --> properties: {         titleText:{             type:String,             value:'其他'         }     },

子組件給父組件傳值

把組件稍微修改一下，新增了詳情操作按鈕，當(dāng)前通過循環(huán)已得出多個(gè)模塊，現(xiàn)在想在點(diǎn)擊詳情的時(shí)候，子級把當(dāng)前模塊的id傳給父級。

子組件給父組件傳參

<!-- 子級wxml -->  <view class="title-oper" bindtap="gotoDetail">詳情</view>

<!-- 子級js -->  gotoDetail(){     this.triggerEvent('gotoDetail',this.data.titleId)  }

父組件接收子組件的參數(shù)

<!-- 父級 wxml --> <x-title titleText="{{item.title}}"              titleId="{{item.id}}"              bind:gotoDetail="gotoDetail"></x-title>

<!-- 父級 js -->  //通過e.detail獲取子組件傳過來的參數(shù) gotoDetail(e){      const id = e.detail      console.log('從子組件接收到的id',id)   }

父級調(diào)用子組件的方法

子組件定義了一個(gè)方法

<!-- 子級 js --> childMethod(){     console.log('我是子組件的方法')  },

父級先給子組件一個(gè)id

<!-- 父級 wxml --> <x-title id="titleCom"></x-title>  <van-button type="primary" bindtap="triggerChildMethod">調(diào)用子組件方法</van-button>

在js頁面的生命周期中獲取組件，然后存到我們自定義的變量titleCom中，接著便可直接調(diào)用子組件里面的方法了

<!-- 父級 js -->  onReady(){     this.titleCom = this.selectComponent("#titleCom");   },    triggerChildMethod(){     this.titleCom.childMethod();   }

如果this.selectComponent()返回為null

1、檢查wxml定義的id和js使用的是否一致；

2、自定義組件是否渲染，例如你使用了wx:if，導(dǎo)致組件還未渲染

傳值官網(wǎng)相關(guān)文檔：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

在自定義組件中使用插槽（slot）

我們上面在自定義組件中加了【詳情】查看的操作按鈕，但是有的地方我們可能并不想用文字，想改成圖標(biāo)或者按鈕，當(dāng)某處放置的節(jié)點(diǎn)內(nèi)容不確定時(shí)，我們就可以使用插槽來處理。

插槽就相當(dāng)于在子組件中放一個(gè)占位符，這樣父組件就可以向子組件填充html了。

單插槽

在子組件加入插槽

<!-- 子級 wxml -->  <slot></slot>

父級即可在組件內(nèi)任意填充內(nèi)容，比如插入一個(gè)圖標(biāo)（如果子級沒有加slot，及時(shí)填充了html也不會被渲染）

<!-- 父級 wxml -->  <x-title>  	<view class="oper-wrap">             <van-icon name="arrow" />     </view>  </x-title>

多插槽

先在子組件的js開啟一下多slot支持

 <!-- 子級 js -->  options: {         multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持     },

在子組件加上插槽需要給插槽加上名字

 <!-- 子級 wxml -->   <slot name="icon"></slot>     <slot name="oper"></slot>

在父級使用

 <!-- 父級 wxml -->   <view class="icon-wrap" slot="icon">     <van-icon name="orders-o" size="24"/>  </view>  <view class="oper-wrap"  slot="oper">    <van-button type="primary" custom-style="{{customStyle}}">