Uniapp 애플릿 개발에서 사용자 정의 구성 요소를 작성하고 가치 전송을 구현하는 방법

uni 프로젝트를 개발하다 보면 팝업창, 버튼 세트 등 공통 모듈을 사용해야 하는 경우가 종종 있습니다. 각 페이지마다 반복해서 작성하면 시간이 많이 걸리고 좋지 않습니다. 시스템 유지 및 관리를 위한 것이므로 임의 호출 목적을 달성하기 위해서는 일반 모듈로 작성하는 것이 필요합니다.

모든 구성 요소는 구성 요소 디렉터리에 정의됩니다. 새 프로젝트에 이 디렉터리가 없으면 직접 만들 수도 있습니다. 다음은 정의된 구성 요소(shopwind-multpicker) 구조입니다.

components/
  shopwind-multpicker/
  shopwind-multpicker.js
shopwind-multpicker.vue
pages/
static/
App.vue

각 구성 요소는 다음과 같습니다. 폴더는 구성 요소를 정의한 후 뷰(vue)에서 호출할 수 있습니다. 코드 예제는 다음과 같습니다.

<shopwind-multpicker :title="title" idField="region_id" nameField="region_name" parentField="parent_id" :selected="selected" @confirm="confirm"></shopwind-multpicker>

이렇게 하면 구성 요소 표시가 완료되므로 구성 요소의 값을 상위 항목에 전달하는 방법은 무엇입니까? 페이지? 구성 요소(shopwind-multpicker.vue) 파일에서 this.$emit 메서드를 사용:

// 组件的vue文件
this.$emit('confirm', '返回父页面的结果集')

그런 다음 상위 페이지에서 Emit의 첫 번째 매개 변수와 동일한 이름을 가진 메서드를 정의해야 합니다(여기: 확인). ) 구성 요소의 반환 결과라는 단어를 받기 위해 이 메소드는

// 父页面的vue文件
export default {
  data() {
    return {}
  },
  methods: {
    confirm(result) {
      // 这里可以获取您选择后返回的数据
      console.log(result)
    }
  }
}

메소드에 정의되어 있습니다. 이는 상위-하위 페이지의 값 전송을 완료합니다. 이 예에서는 플러그-인인 shopwind-multpicker 구성 요소가 사용됩니다. 지역별 연계 등 3단계 연계를 지원하는 플러그인으로, 모든 모델의 3단계 연계를 지원합니다. 필요한 경우 플러그인을 다운로드하여 사용할 수 있습니다. 플러그인 시장에서 무료: 모든 모델을 지원할 수 있는 범용 패키지 3단계 연결(예: 지역 연결, 분류 연결) - DCloud 플러그인 시장

위 내용은 Uniapp 애플릿 개발에서 사용자 정의 구성 요소를 작성하고 가치 전송을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!