미니 프로그램에서 컴포넌트 컴포넌트를 어떻게 사용하나요? 실용 가이드 공유

미니 프로그램에서 컴포넌트를 어떻게 사용하나요? 다음 기사에서는 미니 프로그램의 사용자 정의 구성 요소에 대한 포괄적이고 실용적인 가이드를 공유할 것입니다. 이 가이드가 도움이 되기를 바랍니다.

미니 프로그램에서 페이지 내의 기능 모듈을 추상화하여 다른 페이지에서 재사용하려면 복잡한 페이지를 여러 개의 낮은 결합 모듈로 분할할 수 있는 사용자 정의 구성 요소를 사용할 수 있습니다. 사용하기 편리할 뿐만 아니라 코드 유지 관리에도 도움이 됩니다. [관련 학습 권장 사항: 미니 프로그램 개발 튜토리얼]머리말

이 기사에서 얻을 내용은

작은 프로그램에서 사용자 정의 구성 요소를 사용하는 방법
사용자 정의 구성 요소 간의 다양한 값 전송
사용자 정의 구성요소에서 슬롯 사용

Demining, 이 글의 미니 프로그램은 WeChat 미니 프로그램을 의미합니다(단, 다른 미니 프로그램의 아이디어도 유사해야 합니다)
Demining, 이 글의 주요 내용 사용자 정의 구성 요소에 대한 것입니다. 구성 요소를 패키징하는 방법을 알려주는 것이 아니라 다양한 사용법에 관한 것입니다!
기본 준비(무시 가능)

새 폴더 추가

먼저 루트 디렉터리에 사용자 정의 구성 요소용 폴더를 만듭니다(폴더 이름은 임의이고 위치는 임의입니다)

새 구성 요소 파일

그런 다음 미니 프로그램 편집기를 마우스 오른쪽 버튼으로 클릭하고 새 구성 요소를 만듭니다.

이 단계를 구체적으로 언급해야 하는 이유는 무엇입니까?

나처럼 작은 프로그램 개발 도구만 미리보기 도구로 사용하고 다른 편집기를 사용하여 개발하는 친구가 있는지 모르겠습니다.

미니 프로그램에서 직접 구성 요소나 페이지를 생성하면 한 번에 4개의 파일이 모두 생성되고 콘텐츠 템플릿도 채워지므로 이제 개발자 미리보기 외에도 도구를 사용하여 새 파일을 만들 수도 있습니다.

배경 설명 예시

아래 그림의 모듈 분할 제목을 예시로 삼아 간단한 컴포넌트 예시를 작성해보겠습니다(블라인드 예시)

커스텀 컴포넌트를 어떻게 도입하나요?

생성에 대해서는 별로 할 말이 없고 위의 [새 컴포넌트 파일]을 따르시면 됩니다. 수동으로 생성하는 경우에는 json 파일에 선언하는 것을 잊지 마세요(미니 프로그램 개발 도구에 기본적으로 포함되어 있습니다)

{
  "component": true
}

컴포넌트 메소드 소개

페이지의 json 파일에서 참조 선언 만들기

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

페이지의 wxml에서 커스텀 컴포넌트 사용 기본 구성 요소(이름과 선언은 동일하게 유지됨) json 文件中进行引用声明

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

在页面的 wxml

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

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

값을 전달하는 방법은 무엇입니까?

상위 컴포넌트는 하위 컴포넌트에 값을 전달합니다.

위의 제목 내용을 적어 놓은 것을 볼 수 있지만 실제로 사용하려면 모듈마다 다른 제목 내용을 반드시 전달해야 하므로 다음이 필요합니다. 아버지와 아들 사이에 전달되는 값입니다.

부모가 자식에게 값을 전달합니다

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

자식이 부모가 전달한 값을 받습니다

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

자식 구성 요소가 부모 구성 요소에 값을 전달합니다

구성 요소를 약간 수정하여 추가합니다. 세부 정보 작업 버튼 현재 반복을 통해 여러 모듈을 얻었습니다. 이제 세부 정보를 클릭할 때 하위 모듈의 ID를 상위 모듈에 전달하고 싶습니다.

하위 구성 요소는 상위 구성 요소에 매개 변수를 전달합니다.

<!-- 子级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;)
 },

부모가 하위 구성 요소를 호출하는 방법

자식 구성 요소는

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

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

메서드를 정의합니다. 부모는 먼저 하위 구성 요소에 ID를 제공합니다

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

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

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

위 내용은 미니 프로그램에서 컴포넌트 컴포넌트를 어떻게 사용하나요? 실용 가이드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!