위 챗 애플 릿 사용자 정의 구성 요소 개발 즉 구성 요소 간 통신 상세 설명
5356 단어 위 챗 애플 릿
1. 내 프로젝트 디 렉 터 리 pages components 사용자 정의 구성 요소 2. 하나의 구성 요소 이름 을 toast (디 렉 터 리 아래 파일 은 페이지 개발 과 같 습 니 다. js. wxml. wxs. json 파일) 로 정의 합 니 다. 사용자 정의 구성 요소 의 json 설정 파일 (여 기 는 toast. json) 에서 "component" 를 설정 합 니 다. true (사용자 정의 구성 요소, 다른 페이지 에서 호출 가능) 3.
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' 와 유사 합 니 다.인터넷 과학 보급 의 자료 가 너무 적 고 공식 문서 에 소 개 된 것 도 잘 모 르 기 때문에 상세 하 게 받 아들 이지 않 았 습 니 다 (주로 - >). 시간 이 있 으 면 깊이 알 아 보고 정리 해 드 리 겠 습 니 다). 자, 오늘 은 이렇게 많 습 니 다!
좋은 웹페이지 즐겨찾기
