从Vue中的嵌套子调用父方法

Question

我使用webpack 模板从vue-cli 搭建了一个项目。

现在在App 组件中，我创建了一个引导模式对话框，我想在整个应用程序中重用它。除此之外，我还在 App 组件中创建了一个名为 showMessage 的方法，它实际上完成了显示模态的工作。

现在考虑到我应该能够从任何组件访问该方法，像下面显示的那样调用是一个坏主意吗？

this.$root.$children[0].showMessage('Message', `An email will be sent to ${this.form.email}`)

Answer 1

这是一种处理全局消息传递的脆弱方式。

至少从模态组件内部在根组件上注册一个事件：

methods: {
  showMessage(message) {
    // your code to display the message
  }
},
created() {
  this.$root.$on('showMessage', this.showMessage)
},
destroyed() {
  this.$root.$off('showMessage', this.showMessage)
}

然后您可以使用this.$root.$emit('showMessage', 'foo message') 显示来自该根组件范围内任何位置的消息。

---

创建一个事件总线可能更好：

Vue.prototype.$bus = new Vue();

methods: {
  showMessage(message) {
    // your code to display the message
  }
},
created() {
  this.$bus.$on('showMessage', this.showMessage)
},
destroyed() {
  this.$bus.$off('showMessage', this.showMessage)
}

this.$bus.$emit('showMessage', 'foo message')

这样，您可以更好地分离关注点。