vue如何從組件外部調用方法

小編給大家分享一下vue如何從組件外部調用方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

從組件外部調用方法

你可以通過給它一個從組件外部調用方法ref：

<!-- Parent.vue -->
<template>
  <ChildComponent ref="child" />
</template>

 
// Parent.vue 中的某個地方
this.$refs.child.method();

通常，我們使用道具和事件在組件之間進行通信。道具被發送到子組件，事件被發送回父組件。

<template>
  <ChildComponent
    :tell-me-what-to-do="someInstructions"
    @something-happened="hereIWillHelpYouWithThat"
  />
</template>

但有時你可能會遇到需要父組件觸發子組件中的方法的情況。這是只有向下傳遞道具不起作用的地方。

可以向下傳遞一個布爾值并讓子組件監視它：

<!-- Parent.vue -->
<template>
  <ChildComponent :trigger="shouldCallMethod" />
</template>

// Child.vue
export default {
  props: ['trigger'],
  watch: {
    shouldCallMethod(newVal) {
      if (newVal) {
        // 當觸發器設置為 `true` 時調用該方法
        this.method();
      }
    }
  }
}

這工作正常，但僅限于第一次調用。如果你需要多次觸發此操作，則必須清理并重置狀態。然后邏輯看起來像這樣：

• Parent 組件傳遞true給triggerprop

• Watch被觸發，Child組件調用方法

• Child 組件發出一個事件告訴 Parent 組件該方法已成功觸發

• Parent 組件重置trigger回false，因此我們可以再次執行此操作
  

相反，如果我們在子組件上設置ref ，我們可以直接調用該方法：

<!-- Parent.vue -->
<template>
  <ChildComponent ref="child" />
</template>

// Parent.vue 中的某個地方
this.$refs.child.method();

我們打破了“props down, events up”規則，打破了封裝，但它更清晰、更容易理解值得這樣做！

以上是“vue如何從組件外部調用方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！