Vue任意地方調用父級方法

多數現代的 web UI 框架或庫，好比 Vue、 React 和 Angular，它們利用組件來組織代碼，經過傳遞必要的屬性從父類調用組件的方法/函數是至關容易的。
這意味着您可能須要調用佈局中定義的方法，或者調用來自嵌套級別的組件的父組件調用該方法

在 Vue中，可使用像 Vuex這樣的狀態管理器來實現這一點，可是若是您不想要這樣複雜的解決方案，也可使用至關簡單的內置 Vue 方法

設有一個名爲 MyButton.vue 的組件

以下所示:

<template>
  <div>
    <button @click="$emit('my-event')">Click Me!</button>
  </div>
</template>

<script>
export default {

}
</script>

您能夠看到，有一個調用 $emit 的簡單單擊事件，$emit 是 Vue 中的一個內置方法

固然，若是您想要一個更具結構化的組件，您能夠調用一個自定義方法，並在其中調用 $emit 方法，以下所示

<template>
  <div>
    <button @click="buttonClickHandler">Click Me!</button>
  </div>
</template>

<script>
export default {
  methods: {
    buttonClickHandler() {
      this.$emit('my-event')
    }
  }
}
</script>

不管如何編寫這個部分，它都會發出一個事件。
當您使用這個組件時，您能夠經過 v-on: 或@(這二者徹底相同)來捕獲這個事件，並執行任何您想要的操做。例如，若是你想在你的 index.vue 中使用這個按鈕

template>
  <div>
    <MyButton @my-event="myButtonEventHandler" />
  </div>
</template>

<script>
import MyButton from "~/components/MyButton";

export default {
  components: {
    MyButton
  },
  methods: {
    myButtonEventHandler() {
      alert('I am here!')
    }
  }
}
</script>

當使用 $emit 方法時，如上所示，第一個參數是事件的名稱，其他參數是傳遞給方法的參數。因此你也能夠這樣作:

<template>
  <div>
    <button @click="buttonClickHandler">Click Me!</button>
  </div>
</template>

<script>
export default {
  methods: {
    buttonClickHandler() {
      this.$emit('my-event', 'Hello', 'World')
    }
  }
}
</script>

接受參數

<template>
  <div>
    <MyButton @my-event="myButtonEventHandler" />
  </div>
</template>

<script>
import MyButton from "~/components/MyButton";

export default {
  components: {
    MyButton
  },
  methods: {
    myButtonEventHandler(x, y) {
      alert(x + ' ' + y)
    }
  }
}
</script>

組件嵌套

如今真正的問題來了！假設您有一個很是複雜的佈局，包含數十個嵌套組件。你不能只是一個接一個地把它們傳到上面和上面！(個人意思是，技術上來講你能夠，可是我並不但願這樣作!).在這裏你可使用 $root！把 $root 想象成全部東西的根(其實是這樣的)

在觸發的事件改糙一下，放在$root上

<template>
  <div>
    <button @click="buttonClickHandler">Click Me!</button>
  </div>
</template>

<script>
export default {
  methods: {
    buttonClickHandler() {
      this.$root.$emit('a-far-away-event', 'Adnan')
    }
  }
}
</script>

若是咱們要捕捉$root事件，你應該在 $root 上使用 $on 方法，原理就是把事件註冊到根節點上面

<template>
  <div>
    <MyButton />
  </div>
</template>

<script>
import MyButton from "~/components/MyButton";

export default {
  components: {
    MyButton
  },
  mounted() {
    this.$root.$on('a-far-away-event', this.aFarAwayEventHandler)
  },
  methods: {
    aFarAwayEventHandler() {
      alert('Hello ' + name)
    }
  }
}
</script>

其餘方法傳遞

$attrs、$listeners、provide、inject

原文連接

Vue任意地方調用父級方法