Vue 공개 메소드는 다른 구성요소 메소드를 어떻게 호출합니까?

Vue에서는 컴포넌트 통신이 매우 중요한 문제입니다. 구성 요소는 자체 기능을 구현하기 위해 다른 구성 요소의 메서드를 호출해야 할 수도 있습니다. 이 경우 구성 요소 간 통신을 달성하기 위해 몇 가지 기술적 수단을 사용해야 합니다.

Vue는 이벤트 버스, Vuex, 소품, 방출 등을 포함하여 구성 요소 간의 통신을 구현하는 다양한 방법을 제공합니다. 하지만 공용 메서드에서 다른 구성 요소의 메서드를 호출해야 하는 경우 이러한 메서드를 사용하는 것은 복잡하고 번거로울 수 있습니다. 이때 Vue 인스턴스에서 $root 및 $refs를 사용하여 다른 구성 요소 메서드를 호출할 수 있습니다.

$root 및 $refs는 Vue 인스턴스의 두 가지 속성으로, 이를 통해 다른 구성 요소에서 한 구성 요소에 액세스할 수 있습니다. $root는 루트 Vue 인스턴스이며 전체 Vue 애플리케이션에 액세스할 수 있습니다. $refs는 ref 속성을 가진 모든 하위 구성 요소를 포함하는 개체입니다.

먼저, 다른 구성 요소에 메서드를 정의하고 템플릿의 이 구성 요소에 ref 속성을 추가해야 합니다. 예:

<template>
  <div>
    <button @click="increment">点击我</button>
  </div>
</template>

<script>
  export default {
    methods: {
      increment() {
        this.$emit('increment')
      }
    }
  }
</script>

여기서 증분 방법을 정의하고 이를 버튼에 바인딩합니다. 버튼을 클릭하면 증가 메소드가 사용자 정의 이벤트 'increment'를 트리거합니다. 동시에 이 구성 요소를 상위 구성 요소의 하위 노드로 지정하고 여기에 ref 속성을 추가합니다.

다음으로 상위 구성 요소에서 $refs 속성을 통해 하위 구성 요소에 액세스하고 해당 메서드를 호출할 수 있습니다. 예:

<template>
  <div>
    <ChildComponent ref="child" />
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent'

  export default {
    components: {
      ChildComponent
    },
    created() {
      console.log(this.$refs.child)
      this.$refs.child.increment()
    }
  }
</script>

여기에서는 상위 구성 요소를 생성하고 템플릿에 하위 구성 요소 ChildComponent를 추가했습니다. 동시에 this.$refs.child를 통해 하위 구성 요소의 인스턴스를 얻고 해당 증분 메소드를 호출합니다. 마운트된 후크를 사용할 때 하위 구성 요소가 아직 생성되지 않았기 때문에 생성된 후크에서 $refs를 호출합니다.

이렇게 하면 공개 메서드에서 다른 구성 요소의 메서드를 쉽게 호출할 수 있습니다. 공개 메소드에서 $root 또는 $refs를 통해 해당 구성 요소 인스턴스를 얻고 해당 메소드를 직접 호출하기만 하면 됩니다.

$refs는 비반응형 개체이며 구성 요소가 렌더링될 때만 채워지므로 구성 요소가 렌더링되기 전에 하위 구성 요소의 인스턴스를 가져와야 하는 경우 다음을 사용할 수 있습니다. $children 속성.

결론적으로 $root, $refs를 통해 다른 컴포넌트를 호출하는 것은 매우 편리하고 실용적인 방법입니다. 하지만 컴포넌트가 렌더링되었는지, ref 속성이 있는지 등과 같은 일부 세부 사항에 주의를 기울여야 합니다. 이 메서드는 공용 메서드에서 다른 구성 요소 메서드를 호출해야 할 때 좋은 솔루션을 제공할 수 있습니다.

위 내용은 Vue 공개 메소드는 다른 구성요소 메소드를 어떻게 호출합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!