uniapp은 페이지에서 전달된 매개변수를 어떻게 표시합니까?

uniapp 기반 모바일 애플리케이션을 개발하는 경우 여러 페이지 간에 매개변수를 전달해야 하는 상황이 발생할 수 있습니다. 이번 글에서는 uniapp의 페이지에서 전달된 매개변수를 표시하는 방법을 소개하겠습니다.

uniapp에서는 다양한 방법으로 다음 페이지로 매개변수를 전달할 수 있습니다. 예를 들어 uniapp에서 제공하는 라우팅 점프 API를 사용하여 다음 페이지로 매개변수를 전달할 수 있습니다. 다음 페이지에서는 $mp.page 객체를 통해 전달된 매개변수 값을 얻고 이 매개변수 값을 페이지의 구성요소에 바인딩하여 원하는 효과를 얻을 수 있습니다.

예를 들어 목록 페이지에서 세부정보 페이지로 이동하고 id 매개변수를 전달할 수 있습니다. 세부정보 페이지에서 이 ID 값을 기반으로 관련 데이터를 쿼리하고 해당 데이터를 페이지 구성 요소에 바인딩합니다.

그럼 구체적으로 어떻게 구현할까요? 다음에는 다음과 같은 측면에서 자세히 소개하겠습니다.

1. 점프 라우팅 시 매개변수 전달

uniapp에서 제공하는 API를 사용하여 점프 라우팅 시 매개변수를 다음 페이지로 전달할 수 있습니다. 예를 들어 다음 코드는 id 매개변수를 세부정보 페이지에 전달하는 간단한 라우팅 점프입니다.

uni.navigateTo({
  url: '/pages/detail/detail?id=' + this.id
})

This.id는 현재 페이지의 id 값입니다. 이 값을 상세 페이지 주소의 쿼리 매개변수에 연결합니다.

2. 페이지에서 전달된 매개변수 값을 가져옵니다

상세 페이지로 이동할 때 세부 페이지로 전달된 매개변수 값을 가져와야 합니다. 이는 $mp.page 객체의 options 속성을 통해 얻을 수 있습니다. 예:

onLoad(options) {
  console.log(options.id) // 打印出传递过来的id值
}

onLoad 함수에서는 options.id를 통해 전달된 id 매개변수 값을 가져오고 후속 작업을 수행할 수 있습니다.

컴포넌트 페이지에서 매개변수를 전달받은 경우 this.$mp.options를 통해 매개변수를 가져와야 합니다.

3. 매개변수를 페이지 구성요소에 바인딩

전달된 매개변수를 얻은 후 이러한 매개변수를 하위 구성요소에 바인딩하여 페이지 데이터 렌더링을 달성할 수 있습니다.

Vue에서는 v-bind 지시문을 통해 매개변수를 구성 요소의 props 속성에 바인딩할 수 있습니다. 예를 들어 다음 코드는

<template>
  <div>
    <h1>{{ content.title }}</h1>
    <p>{{ content.desc }}</p>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      content: {}  // 用于存放获取到的数据
    }
  },
  created() {
    this.getContent(this.id)
  },
  methods: {
    getContent(id) {
      // 根据id获取数据，并将数据绑定到content对象上
    }
  }
}
</script>

위 코드에서는 props를 통해 id 속성을 정의하고, 전달된 id 매개변수를 id 속성에 할당합니다. 생성된 함수에서 getContent 함수를 호출하여 데이터를 비동기적으로 획득하고 해당 데이터를 콘텐츠 개체에 저장합니다.

마지막으로 콘텐츠 개체의 데이터를 구성 요소의 h1 및 p 태그에 바인딩하고 페이지가 로드된 후 데이터를 표시합니다.

요약하자면, uniapp에서 제공하는 API를 통해 매개변수를 전달하고, $mp.page 객체를 통해 전달된 매개변수 값을 얻고, 속성을 바인딩하여 매개변수를 페이지에 렌더링할 수 있습니다. 이 기사가 uniapp의 페이지에서 전달된 매개변수를 표시하는 방법을 더 잘 이해하는 데 도움이 되기를 바랍니다.

위 내용은 uniapp은 페이지에서 전달된 매개변수를 어떻게 표시합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!