uniapp이 하위 구성 요소 메서드를 호출하지 못하면 어떻게 해야 합니까?-uni-app-php.cn

uniapp이 하위 구성 요소 메서드를 호출하지 못하면 어떻게 해야 합니까?

PHPz

풀어 주다： 2023-04-27 09:31:07

원래의

790명이 탐색했습니다.

최근에 uniapp을 사용하여 작은 프로그램을 개발할 때 문제가 발생했습니다. 하위 구성 요소 메서드 호출에 실패했습니다. 몇 가지 연구와 디버깅 끝에 해결책을 찾았고 이제 이를 여러분과 공유합니다.

먼저 이 문제가 발생하는 시나리오를 살펴보겠습니다. 사용자 정의 구성 요소가 페이지에 도입되고 구성 요소에 외부에서 호출해야 하는 메서드가 있습니다. 구성 요소 개체의 메서드에서 메서드를 정의하고 구성 요소 내에서 메서드를 호출하면 이를 달성할 수 있습니다. 그러나 실제로 호출하면 아래와 같이 이 메서드가 항상 null 값을 반환하는 것을 발견했습니다.

// 引入组件
<template>
  <custom-component ref="customComponent"></custom-component>
</template>

<script>
  import customComponent from '@/components/custom-component.vue'
  export default {
    components: {
      customComponent
    },
    mounted() {
      // 调用子组件方法
      const data = this.$refs.customComponent.customMethod()
      console.log(data) // 输出：undefined
    }
  }
</script>

// custom-component.vue
<template>
  <div>这是一个自定义组件</div>
</template>

<script>
  export default {
    methods: {
      customMethod() {
        return '这是从子组件返回的数据'
      }
    }
  }
</script>

로그인 후 복사

여기서는 상위 구성 요소에서 하위 구성 요소의 customMethod 메서드를 호출하고 해당 메서드의 반환 값을 인쇄하려고 합니다. 그러나 콘솔에서는 반환 값이 정의되지 않은 것으로 나타났습니다.

조사 결과 이는 uniapp의 컴포넌트 통신 방식이 Vue의 기본 컴포넌트 통신 방식과 다르기 때문인 것으로 확인되었습니다. uniapp에서는 uni.$emit를 사용하여 이벤트를 보내고 구성 요소에서 이벤트를 수신해야 합니다. 올바른 예는 다음과 같습니다.

// 引入组件
<template>
  <custom-component @customEvent="onCustomEvent"></custom-component>
</template>

<script>
  import customComponent from '@/components/custom-component.vue'
  export default {
    components: {
      customComponent
    },
    methods: {
      onCustomEvent(data) {
        console.log(data) // 输出：这是从子组件返回的数据
      }
    }
  }
</script>

// custom-component.vue
<template>
  <div>这是一个自定义组件</div>
</template>

<script>
  export default {
    methods: {
      customMethod() {
        // 向父组件发送事件
        this.$emit('customEvent', '这是从子组件返回的数据')
      }
    }
  }
</script>

로그인 후 복사

이 예에서는 @customEvent를 사용하여 하위 구성 요소의 이벤트를 수신하고 onCustomEvent 메서드의 하위 구성 요소에서 전달된 데이터를 처리합니다. 이벤트 전송 방법은 상위 구성 요소에서 하위 구성 요소의 메서드를 호출하는 것이 아니라 하위 구성 요소에서 수행되어야 한다는 점에 유의하세요.

uniapp에서는 상위 컴포넌트가 하위 컴포넌트의 메소드를 직접 호출할 수 없기 때문입니다. 대신 데이터 전송 및 구성요소 통신을 위해 이벤트를 사용해야 합니다.

결론적으로 유니앱과 네이티브 Vue의 컴포넌트 통신 방식이 살짝 다릅니다. uniapp에서는 이벤트를 통해 컴포넌트 간 통신이 필요합니다. 특히 하위 구성 요소의 메서드를 호출할 때 $emit를 사용하여 이벤트를 보내고 하위 구성 요소의 이벤트를 수신해야 합니다.

이 글이 모든 분들께 도움이 되었으면 좋겠습니다. 읽어주셔서 감사합니다!

위 내용은 uniapp이 하위 구성 요소 메서드를 호출하지 못하면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!