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

Question

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

现在，我在 App 组件中创建了一个 bootstrap 模态对话框，我想在整个应用程序中重用它。除此之外，我还在 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')

这样，您的关注点分离会稍微好一些。

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

Call parent method from nested child in Vue

javascript

vue.js

vue-cli