WeChat 애플릿은 어떻게 가치를 전달합니까?

1. 부모에서 자식으로 전달
설명 :
부모 구성 요소의 사용자 지정 속성을 통해 값을 전달 하고 자식 구성 요소 js 파일의 속성 속성을 통해 값을 수락하고 기본값을 설정 한 다음 마지막으로 자식 구성 요소에서 직접 렌더링합니다.

1. 상위 구성 요소의 json 파일에서 하위 구성 요소에 대한 참조 선언

// parents.json
{
  "usingComponents": {
    "w-child": "/components/children/children"
  }
}

2. 상위 컴포넌트의 wxml에서 하위 컴포넌트 사용

<w-child fatherName='mike fatherage='25'></w-child>

3. 자식 구성 요소는 js에서 부모 구성 요소로부터 전달 된 값을 가져옵니다.
properties는 구성 요소 의 외부 속성으로 속성 이름에서 속성 설정으로의 매핑 테이블입니다. 속성 설정에는 3 개의 필드가 포함될 수 있으며 유형은 속성 유형을 나타냅니다. , value는 초기 속성을 나타내고, Value, Observer는 속성 값이 변경 될 때의 응답 함수를 나타냅니다.

// child.js
properties: {  // 在这里拿到了数据之后可以直接使用了（在wxml模板渲染，或者js中使用this.data.fatherName/this.properties.fatherName 都能获取到），不要直接修改properties属性中的数据
  fatherName: {
    type: String
  },
  fatherage: Number
}

2. 상위 컴포넌트 (this.triggerEvent ())에 값을 전달
하는 하위 컴포넌트의 주요 구현 원칙 : 이벤트 게시 및 구독 방법 (관찰자 모드라고도 함)
은 this.triggerEvent ( '를 통해 하위 컴포넌트에 정의됩니다. ','Data to be transfer ')를 디스패치하는 방법 [this. $ emit과 유사]
부모 컴포넌트에서 bindconfirm = "method name"(getConfirmData)를 전달하고 getConfirmData 메소드에 데이터 매개 변수가 있습니다. , 값을 통해 전달됨

1. 하위 구성 요소가 사용자 지정 이벤트를 트리거하고 데이터를 상위 구성 요소에 전달합니다.

<!-- child.wxml-->
<view class="nav" data-index="0" bindtap="onChangeValue">tab</view>

2. 하위 구성 요소가 클릭 이벤트에서 사용자 지정 이벤트를 적극적으로 트리거합니다.

// child.js
onChangeValue(e) {
      var index = e.target.dataset.index      
      //子组件传值给父组件
      let detail = { // 需要传递什么数据就在这个对象中写
        val: index
      }
      // detail 对象，提供给事件监听函数的参数数据
      // changeIndex 是自定义名称事件，父组件中监听使用
      this.triggerEvent('changeIndex', myEventDetail)
    }

3. 하위 구성 요소의 사용자 지정 이벤트는 상위 구성 요소 wxml에서 모니터링됩니다.

<!-- parents.wxml-->
<!-- 注意这里写的事件监听名字-->
 <w-child bind:changeIndex="getIndex" />

4. 부모 구성 요소의 js에 이벤트 함수를 추가하여 자식 구성 요소가 전달한 데이터를 가져옵니다.

// parents.js
  getIndex( data) { // paramData参数就是子组件的this.triggerEvent()
    console.log(data.detail.val)  // 0
  }

WeChat 애플릿은 어떻게 가치를 전달합니까?

추천