위 챗 애플 릿 사용자 정의 구성 요소 개발 즉 구성 요소 간 통신 상세 설명

1. 내 프로젝트 디 렉 터 리 pages components 사용자 정의 구성 요소 2. 하나의 구성 요소 이름 을 toast (디 렉 터 리 아래 파일 은 페이지 개발 과 같 습 니 다. js. wxml. wxs. json 파일) 로 정의 합 니 다. 사용자 정의 구성 요소 의 json 설정 파일 (여 기 는 toast. json) 에서 "component" 를 설정 합 니 다. true (사용자 정의 구성 요소, 다른 페이지 에서 호출 가능) 3. {{color}}yes no 이것 은 사용자 정의 구성 요소 에 설 정 된 텍스트 내용 (노드 내용 아래 설명) 4. 사용자 정의 구성 요소 에 있 는 Component 구조 기 에 해당 하 는 내용 을 설정 합 니 다.

Component({
  options: {
    multipleSlots: true //             slot  
  },
  properties: {//            
    isHeader: {
      type: String,
      value: '         ', //      :                             
      // clickHeader() {
      //   console.log("           ")
      // }
    },
    backgroundColor: { //    backgroundcolor               
      type: Boolean,
      value: true
    },
    color: { //                
      type: String,
      value:'  ' //                      
    }
  },
  data:{
    backgroundColor: true. //                      
  },
  methods:{//              
    clickYes(){
      let clickYes = {
        age: 18,
        name: 'jack'
      }
      this.triggerEvent('clickYes', clickYes) //  this.triggerEvent                     
    },(             ,          )
    clickNo(){
      console.log("   no")
    },
    //                 event
    getuser(e){
      this.triggerEvent('getuser',e)
    }
  }
})

4. 부모 구성 요소 에서 이 하위 구성 요 소 를 호출 합 니 다.

{
  "enablePullDownRefresh":true,
  "usingComponents": {
    "header": "../components/header/header",
    "toast":"../components/toast/toast"
  }
}

5. 부모 구성 요소 에서 하위 구성 요소 의 properties 값 과 하위 구성 요소 에서 정의 하 는 방법 을 정의 합 니 다.

   //         

/ / 공식 설명: 구성 요소 템 플 릿 에서 하나의 노드 를 제공 할 수 있 습 니 다. 구성 요소 인용 을 불 러 올 때 제공 하 는 하위 노드 는 바로 자체 구성 요소 에 노드 를 삽입 하 는 것 입 니 다. 부모 구성 요소 에서 자체 구성 요 소 를 사용 할 때 다른 업무 내용 을 삽입 할 수 있 습 니 다. 하위 구성 요 소 는 기본적으로 하나의 노드 를 삽입 할 수 있 습 니 다.여러 노드 가 필요 하 다 면 하위 구성 요소 의 coponets 구조 기 에 있 는 multiple Slots 속성 을 true 로 표시 하고 여러 노드 에서 name 으로 구분 해 야 합 니 다. 부모 구성 요소 에 대응 하 는 name 값 으로 노드 를 배치 합 니 다. 6. 부모 구성 요소 에서 호출 합 니 다.

  clickYes(e){
    console.log(e.detail,"           ")
    let {name,age} = e.detail
    console.log(name,age,)

    this.setData({
      backgroundColor: !this.data.backgroundColor,
      color: `${this.data.backgroundColor == true ? '   ': '  '}` //          
    })
  },

이렇게 하면 완전한 사용자 정의 구성 요소 호출 7. 사용자 정의 구성 요소 의 통신 입 니 다. 예 를 들 어 프로젝트 에서 부모 구성 요 소 를 만 나 a 구성 요소 와 b 구성 요 소 를 동시에 호출 할 수 있 습 니 다. 또한 a 구성 요 소 는 b 구성 요소 와 b 구성 요소 의 통신 을 어떻게 할 수 있 습 니까?사용자 정의 구성 요소 b > 사용자 정의 구성 요소 a > / 사용자 정의 구성 요소 a 에 노드 를 삽입 하 는 것 을 잊 지 마 십시오. 먼저 부모 구성 요소 json 파일 에 a, b 사용자 정의 구성 요소 의 사용 을 설명 하 는 것 을 잊 지 마 십시오.

{
 "usingComponents": {
  "page": "../components/page/page",
  "footer": "../components/footer/footer"
  }
}

관건: 사용자 정의 구성 요소 a 와 사용자 정의 구성 요소 b 의 compontes 구조 기 에서 relations 속성 사용자 정의 구성 요소 a 의 js 파일 을 동시에 설명 합 니 다.

  relations: {
    '../footer/footer': {
      type: 'child',
      linked: function (target) { }, // target   footer   ，
      linkChanged: function (target) { },
      unlinked: function (target) { }
    }
  } ,

사용자 정의 구성 요소 a 에서 clickBrother 방법 을 정의 하여 사용자 정의 구성 요소 b 의 값 을 가 져 오고 수정 합 니 다.

  methods:{
    clickBrother(e){
      let nodes = this.getRelationNodes('../footer/footer')
    console.log(nodes[0].data.color)
    nodes[0].setData({
      color: true
    })
    nodes[0].data.color = true
    }
  } 
     a    this.getRelationNodes(    )      b     ,      b  color     

사용자 정의 구성 요소 b 의 js 파일

Component({
  properties: {
    name: {
      type: String,
    }
  },
  data: {
    page: '  footer  ',
    color: false
  },
  relations: {
    '../page/page': {
      type: 'parent',
      linked: function (target) { }, // target   page   ，
      linkChanged: function (target) { },
      unlinked: function (target) { }
    }
  },
})

사용자 정의 구성 요소 b 의 wxml 파일:

       //     a    b      

요약: 이상 은 사용자 정의 구성 요소 의 개발 과 구성 요소 간 의 통신 과정 입 니 다. 이러한 내용 을 알 게 되 었 습 니 다. 업무 중의 일상적인 개발 구성 요소 문제 에 직면 하여 쉽게 해결 할 수 있 습 니 다. 시간 이 촉박 하기 때문에 일부 세부 내용 이 잘 소개 되 지 않 을 수도 있 습 니 다. 구성 요소 중의 behaviors (... 일부 프로 그래 밍 언어 중의 'mixins' 또는' traits' 와 유사 합 니 다.인터넷 과학 보급 의 자료 가 너무 적 고 공식 문서 에 소 개 된 것 도 잘 모 르 기 때문에 상세 하 게 받 아들 이지 않 았 습 니 다 (주로 - >). 시간 이 있 으 면 깊이 알 아 보고 정리 해 드 리 겠 습 니 다). 자, 오늘 은 이렇게 많 습 니 다!