How to use Component components in mini programs? Practical guide sharing

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

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

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

The child receives the value passed by the parent

<!-- 子级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

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

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

The parent component receives Parameters of the child component

<!-- 父级 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)
  }

The parent calls the method of the child component

The child component defines a method

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

Parent First, give the sub-component an id

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

<van-button type="primary" bindtap="triggerChildMethod">调用子组件方法</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

<!-- 父级 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

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

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!