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

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

青灯夜游
青灯夜游앞으로
2021-10-11 11:00:166047검색

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

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

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

이 기사에서 얻을 내용은

    작은 프로그램에서 사용자 정의 구성 요소를 사용하는 방법
  • 사용자 정의 구성 요소 간의 다양한 값 전송
  • 사용자 정의 구성요소에서 슬롯 사용
    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();
  }

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

如果this.selectComponent()返回为null

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

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

传值官网相关文档:

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

在自定义组件中使用插槽(slot)

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

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

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

单插槽

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

在子组件加入插槽

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

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

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

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

多插槽

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

先在子组件的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미니 프로그램에서 컴포넌트 컴포넌트를 어떻게 사용하나요? 실용 가이드 공유

注意

问:为什么加了插槽,却没有反应?

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

虽然我只在【子组件】加了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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제