Uniapp이 다른 페이지를 호출하는 방법에 대해 이야기해 보겠습니다.

모바일 애플리케이션의 급속한 발전과 함께 크로스 플랫폼 애플리케이션 개발에 H5를 점점 더 많이 사용하고 있습니다. 프론트 엔드 크로스 플랫폼 개발을 위한 인기 있는 프레임워크인 Uniapp은 강력한 기능과 사용하기 쉬운 기능으로 인해 점점 더 많은 개발자들이 선호하고 있습니다. Uniapp 개발에서는 일부 기능을 구현하기 위해 다른 페이지의 메서드를 호출해야 하는 경우가 많습니다. 이 기사에서는 Uniapp이 다른 페이지를 호출하는 방법을 소개합니다.

1. vuex를 통한 호출

vuex는 Uniapp에서 데이터를 관리하는 도구로 전역 상태로 데이터를 저장하며 모든 컴포넌트에서 호출할 수 있습니다. vuex를 통해 다른 페이지에서 메소드 호출을 할 수 있습니다. 다음은 간단한 예입니다.

// store.js
const store = new Vuex.Store({
  state: {
    someData: 'Hello World'
  },
  mutations: {
    changeData(state, newData) {
      state.someData = newData
    }
  }
})

이 메서드를 호출해야 하는 구성 요소에서는 this.$store.commit() 메서드를 사용하여 호출할 수 있습니다.

// otherComponent.vue
export default {
  methods: {
    changeData(newData) {
      this.$store.commit('changeData', newData)
    }
  }
}

2. uni.$emit을 통해 호출

실제로 좋은 구성 요소도 있습니다. Vue 통신 방식인 이벤트 전달에서는 Uniapp도 이 방식을 지원합니다. uni.$emit() 메서드를 사용하여 한 구성 요소에서 사용자 정의 이벤트를 트리거하고 $on()을 사용하여 이벤트를 수신하고 다른 구성 요소에서 해당 작업을 수행할 수 있습니다.

소스 구성 요소에서:

// sourceComponent.vue
export default {
  methods: {
    emitEvent(data) {
      uni.$emit('eventName', data)
    }
  }
}

대상 구성 요소에서:

// targetComponent.vue
export default {
  created() {
    uni.$on('eventName', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      console.log(data)
    }
  }
}

이런 방식으로 한 구성 요소에서 다른 구성 요소의 메서드를 호출하여 구성 요소 간 기능적 상호 작용을 달성할 수 있습니다.

3. uni.navigateTo를 통해 호출

실제 개발 과정에서는 한 페이지에서 다른 페이지로 이동하고 다른 페이지에서 특정 작업을 수행해야 하는 경우가 많습니다. uni.navigateTo 메소드를 사용하여 페이지로 이동하고 대상 페이지에서 해당 작업을 수행할 수 있습니다.

소스 페이지에서:

// sourcePage.vue
export default {
  methods: {
    navigateToTarget() {
      uni.navigateTo({
        url: '/pages/targetPage/targetPage',
        success() {
          console.log('跳转成功')
        }
      })
    }
  }
}

대상 페이지에서 페이지가 로드될 때 onLoad() 함수를 사용하여 해당 작업을 수행할 수 있습니다:

// targetPage.vue
export default {
  onLoad(options) {
    console.log(options)
  }
}

4 uni-app 이벤트 버스를 통해 호출

Uni- 앱은 다양한 페이지 간 통신을 달성하는 데 사용할 수 있는 이벤트 버스 기능을 제공합니다. 사용 방법은 매우 간단합니다. 어느 페이지에서나 uni를 가져오고 게시-구독 기능을 사용할 수 있습니다.

소스 페이지에서 $emit를 사용하여 맞춤 이벤트를 실행합니다:

// sourcePage.vue
export default {
  methods: {
    emitEvent(data) {
      uni.$emit('eventName', data)
    }
  }
}

대상 페이지에서 $on을 사용하여 이벤트를 수신하고 해당 작업을 수행할 수 있습니다:

// targetPage.vue
export default {
  created() {
    uni.$on('eventName', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      console.log(data)
    }
  }
}

요약

Uniapp을 개발할 때 , 우리는 일부 기능을 구현하기 위해 다른 페이지에서 메서드를 호출해야 하는 경우가 많습니다. Vuex, 이벤트 전달, 페이지 점프 및 Uni-app 이벤트 버스를 통해 페이지 간 호출 방법을 구현하여 개발을 촉진하고 애플리케이션 확장성을 향상시킬 수 있습니다.

위 내용은 Uniapp이 다른 페이지를 호출하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!