How to use the Component component in the mini program? The following article will share with you a comprehensive and practical guide to the custom component of the mini program. I hope it will be helpful to you!

In the mini program, if we want to abstract the functional modules within the page and reuse in different pages, we can use it Custom components, custom components can split complex pages into multiple low coupling modules, which is not only convenient to use, but also helps our code maintenance. [Related learning recommendations: 小program development tutorial]

Preface

You will gain from this article

• How to use mini programs Defining components

• Various value transfers between custom components

• Using slots in custom components

• Demining, the mini program in this article refers to the WeChat mini program (but other mini programs should have similar ideas)

• Demining, this article mainly The content is about various uses of custom components, not teaching you how to package components!

Basic preparation (can be ignored)

Add a new folder

First create a folder specifically for custom components in the root directory ( The folder name is arbitrary and the location is arbitrary)

Create a new Component file

Then in the mini program editor, right-click and create a new Component

Why do we need to mention this step specifically?

I don’t know if there are any friends who, like me, have only used the small program development tool as a preview tool, and then used other editors for development.

Later I discovered that if you create a Component or Page directly in the mini program, it will create all four files in one go, and the content template will also be filled in, so now developers In addition to previewing the tool, I also use it to create new files.

Sample background description

We will write a simple component example using the module segmentation title in the figure below as an example (just a blind example)

How to introduce custom components?

Not much to say about creation, just follow the above [New Component file]. If you create it manually, don’t forget to declare it in the json file (it is included by default in the new mini program development tool)

{
  "component": true
}

Introduce component methods

Make a reference statement in the json file of the page

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

In the page In wxml, use custom components like basic components (the name must be consistent with the declaration)

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

How to pass the value?

Parent component passes value to child component

You can see that we have written down the content of the title above, but in actual use we definitely need to pass in different titles according to different modules. content, so we need to use value transfer between parent and child.

The parent passes the value to the child

<!-- 父級(jí)wxml -->
<x-title titleText="全部訂單"></x-title>

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

The child receives the value passed by the parent

<!-- 子級(jí)js -->
properties: {
        titleText:{
            type:String,
            value:&#39;其他&#39;
        }
    },

The child component passes the value to the parent component

Modify the component slightly and add a new details operation button. Currently, multiple modules have been obtained through looping. Now I want to click on the details. , the child passes the ID of the current module to the parent.

The child component passes parameters to the parent component

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

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

The parent component receives Parameters of the child component

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

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

The parent calls the method of the child component

The child component defines a method

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

Parent First, give the sub-component an id

<!-- 父級(jí) wxml -->
<x-title id="titleCom"></x-title>

<van-button type="primary" bindtap="triggerChildMethod">調(diào)用子組件方法</van-button>

Get the component in the life cycle of the js page, and then save it to our custom variable titleCom. Then you can directly call the method in the sub-component

<!-- 父級(jí) 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了。

單插槽

在子組件加入插槽

<!-- 子級(jí) wxml -->
 <slot></slot>

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

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

多插槽

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

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

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

 <!-- 子級(jí) wxml --> 
 <slot name="icon"></slot>
 
  <slot name="oper"></slot>

在父級(jí)使用

 <!-- 父級(jí) 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>

注意

問：為什么加了插槽，卻沒有反應(yīng)？

雖然我只在【子組件】加了1個(gè)插槽，但是因?yàn)榧由狭嗣?，所以同樣需要在【子組件】的js里開啟多插槽

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

插槽官網(wǎng)文檔：

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

Component的生命周期

Component({
  lifetimes: {
    attached: function() {
      // 在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時(shí)執(zhí)行
    },
    detached: function() {
      // 在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除時(shí)執(zhí)行
    },
  },
  //組件所在頁面的生命周期
   pageLifetimes: {
    show: function() {
      // 頁面被展示
    },
    hide: function() {
      // 頁面被隱藏
    },
    resize: function(size) {
      // 頁面尺寸變化
    }
  }
  // 以下是舊式的定義方式，可以保持對(duì) <2.2.3 版本基礎(chǔ)庫的兼容
  attached: function() {
    // 在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時(shí)執(zhí)行
  },
  detached: function() {
    // 在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除時(shí)執(zhí)行
  },
  // ...
})

生命周期官網(wǎng)：

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

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：編程視頻??！

The above is the detailed content of How to use Component components in mini programs? Practical guide sharing. For more information, please follow other related articles on the PHP Chinese website!