小程式中Component元件怎麼使用？實用指南分享

小程式中Component元件怎麼使用？以下這篇文章跟大家分享一下小程式自訂元件Component超全實用指南，希望對大家有幫助！

在小程式中，想要將頁面內的功能模組抽像出來，在不同的頁面中重複使用，我們可以使用它的自訂元件，自訂元件可以將複雜的頁面拆分成多個低耦合的模組，這不僅使用起來方便，而且還有助於我們的程式碼維護。 【相關學習推薦：小程式開發教學】

前言

本文你將收穫

• ##小程式如何使用自定義元件

• 自訂元件之間的各種傳值

• #自訂元件中插槽的使用

• #排雷，本文的小程式指的是微信小程式（不過其他的小程式思路應該差不多）

• 排雷，本文主要內容是自訂元件的各種用法，不是教大家怎麼封裝元件哈！

基礎準備（可忽略）

新增資料夾

首先在根目錄下建立一個專門放自訂元件的資料夾（資料夾名稱任意，位置也任意）

新新進程式檔案

然後在小程式編輯器裡，右鍵，新Component

為什麼要刻意說這一步呢？

不知道有沒有小夥伴們和我一樣一直只把小程式開發工具當預覽工具用，然後開發是用其他編輯器的。

後面發現直接在小程式新建Component或Page，它會一口氣把四個檔案都建好，內容範本也會填好，所以現在開發者工具除了預覽，我還用它新建檔案。

範例背景說明

我們後面就以類似下圖中的模組分割標題為例寫一個簡單的元件範例（只是瞎舉例）

怎麼會引入自訂元件？

創建不多說，如以上【新Component檔案】即可，如果是自己手動創建，別忘了在json檔案宣告（小程式開發工具新建的預設就有）

{
  "component": true
}

引入元件方法

在頁面的

json 檔案中進行引用宣告

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

在頁面的

wxml 中像使用基礎元件一樣使用自訂元件（名字和宣告的保持一致）

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

怎麼傳值？

父元件給子元件傳值

可以看到我們上面把標題的內容寫死了，但是實際上使用我們肯定是需要根據不同的模組，傳入不同的標題內容，這樣我們就需要使用到父子之間的傳值了。

父級給子級傳值

<!-- 父级wxml -->
<x-title titleText="全部订单"></x-title>

<!-- 如果父级的值是一个变量则 -->
<x-title titleText="{{currentTitle}}"></x-title>

子級接收父級傳過來的值

<!-- 子级js -->
properties: {
        titleText:{
            type:String,
            value:&#39;其他&#39;
        }
    },

子組件給父組件傳值

把元件稍微修改一下，新增了詳情操作按鈕，目前透過循環已得出多個模組，現在想在點擊詳情的時候，子級把目前模組的id傳給父級。

子元件向父元件傳參

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

<!-- 子级js -->
 gotoDetail(){
    this.triggerEvent(&#39;gotoDetail&#39;,this.data.titleId)
 }

父元件接收子元件的參數

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

<!-- 父级 js -->
 //通过e.detail获取子组件传过来的参数
gotoDetail(e){ 
    const id = e.detail 
    console.log(&#39;从子组件接收到的id&#39;,id)
  }

父級呼叫子元件的方法

子元件定義了一個方法

<!-- 子级 js -->
childMethod(){
    console.log(&#39;我是子组件的方法&#39;)
 },

父層級先給子元件一個id

<!-- 父级 wxml -->
<x-title id="titleCom"></x-title>

<van-button type="primary" bindtap="triggerChildMethod">调用子组件方法</van-button>

在js頁面的生命週期中取得元件，然後存到我們自訂的變數titleCom中，接著便可直接呼叫子元件裡面的方法了

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

如果this.selectComponent()返回为null

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

2、自定义组件是否渲染，例如你使用了wx:if，导致组件还未渲染

传值官网相关文档：

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

在自定义组件中使用插槽（slot）

我们上面在自定义组件中加了【详情】查看的操作按钮，但是有的地方我们可能并不想用文字，想改成图标或者按钮，当某处放置的节点内容不确定时，我们就可以使用插槽来处理。

插槽就相当于在子组件中放一个占位符，这样父组件就可以向子组件填充html了。

单插槽

在子组件加入插槽

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

父级即可在组件内任意填充内容，比如插入一个图标（如果子级没有加slot，及时填充了html也不会被渲染）

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

多插槽

先在子组件的js开启一下多slot支持

 <!-- 子级 js -->
 options: {
        multipleSlots: true // 在组件定义时的选项中启用多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}}">更多</van-button>
</view>

注意

问：为什么加了插槽，却没有反应？

虽然我只在【子组件】加了1个插槽，但是因为加上了名字，所以同样需要在【子组件】的js里开启多插槽

 options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },

插槽官网文档：

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

Component的生命周期

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  //组件所在页面的生命周期
   pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

生命周期官网：

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

更多编程相关知识，请访问：编程视频！！

以上是小程式中Component元件怎麼使用？實用指南分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！