vue如何從組件外部調(diào)用方法

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

從組件外部調(diào)用方法

你可以通過給它一個(gè)從組件外部調(diào)用方法ref：

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

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

通常，我們使用道具和事件在組件之間進(jìn)行通信。道具被發(fā)送到子組件，事件被發(fā)送回父組件。

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

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

可以向下傳遞一個(gè)布爾值并讓子組件監(jiān)視它：

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

// Child.vue
export default {
  props: ['trigger'],
  watch: {
    shouldCallMethod(newVal) {
      if (newVal) {
        // 當(dāng)觸發(fā)器設(shè)置為 `true` 時(shí)調(diào)用該方法
        this.method();
      }
    }
  }
}

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

• Parent 組件傳遞true給triggerprop

• Watch被觸發(fā)，Child組件調(diào)用方法

• Child 組件發(fā)出一個(gè)事件告訴 Parent 組件該方法已成功觸發(fā)

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

相反，如果我們在子組件上設(shè)置ref ，我們可以直接調(diào)用該方法：

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

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

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

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