상위 구성 요소 Vue에서 하위 구성 요소의 메서드를 호출하는 방법

상위 구성 요소 Vue에서 하위 구성 요소의 메서드를 호출하는 방법

vue의 상위 구성 요소에서 하위 구성 요소의 메서드를 실행하여 해당 구성 요소의 일부 영역을 새로 고칩니다.여기 내가 원하는 것의 예가 있다.

Home.vue

<template>
   <componentp></componentp>
</template>

<script>
.....
methods:{
  parentMethod(){
    //I want to call to methodx in componentp
  }
}
...
</script>

컴포넌트p표시하다

<template>
..............
</template>

<script>
....
methods:{
 methodx(){
   //Run me from parent
 }
}
}
...
</script>

서브 컴포넌트의 methodx를 호출하려면 어떻게 해야 합니까?

@Chris G가 말하는 대로 할 수 없는 경우, 다른 방법으로 워처를 사용할 수 있습니다.

https://vuejs.org/v2/guide/computed.html#Watchers

몇 가지 '관리' 변수를 생성하고 공정을 만들기 위해 변수가 변경되는지 관찰합니다.

컴포넌트에서 파라미터의 상위를 감시하고 상위 파라미터를 변경한 후 컴포넌트에서 함수를 실행할 수 있습니다.이 링크를 보세요. 데이터 페이지로 페이지에서 구성 요소에서 실행 기능이 필요합니다.

<template>
   <componentp ref="componentp"></componentp>
</template>

<script>
.....
methods:{
  parentMethod(){
    //I want to call to methodx in componentp
    this.$refs.componentp.methodx()
  }
}
...
</script>

언급URL : https://stackoverflow.com/questions/68403580/how-to-call-to-sub-component-s-method-in-parent-component-vue