曾祖父组件中的VueJS孙组件调用函数 [英] VueJS Grandchild component call function in Great grandparent component

问题描述

假设我有一个子组件想要向曾祖父母发送消息，代码会是这样的，如果我错了，请纠正我:

Suppose I have a child component that want to send a message to a great grandparent, the code will be like this, correct me if I'm wrong:

Vue.component('child', {
  template: `<div v-on:click="clicked">Click me</div>`,
  methods: {
    clicked: function () {
        this.$emit('clicked', "hello")
    },
  },
});

Vue.component('parent', {
  template: `<child v-on:clicked="clicked"></child>`,
  methods: {
    clicked: function (msg) {
        this.$emit('clicked', msg)
    },
  },
});


Vue.component('grandparent', {
  template: `<parent v-on:clicked="clicked"></parent>`,
  methods: {
    clicked: function (msg) {
        this.$emit('clicked', msg)
    },
  },
});

Vue.component('greatgrandparent', {
  template: `<grandparent v-on:clicked="clicked"></grandparent>`,
  methods: {
    clicked: function (msg) {
        console.log('message from great grandchild: ' + msg);
    },
  },
});

有没有可能直接截取子进程的消息并调用曾祖父进程中的clicked函数而不需要在每个父进程都设置传递回调?

Is there a possibility to directly intercept the message from the child and call the clicked function in the great-grandparent without the need to set up the passing callback at every parent?

我知道我可以使用自定义数据总线，https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication，但由于我的组件已经有父子关系，我不应该能够以更简单的方式通知祖父母?

I know I can use a custom databus, https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication, but since my components have parent-child relationship already, shouldn't I be able to notify the grandparent in a simpler way?

推荐答案

如果您想保持封装，则不可以.greatgrandparent 不应该知道 child.它知道 grandparent，但不知道有子组件或有多少.原则上，您可以将 grandparent 的一个实现替换为另一个没有多层的实现.或者有更多层可以到达 child.您可以将 child 放入顶级组件中.

Not if you want to maintain encapsulation. greatgrandparent is not supposed to know about child. It knows about grandparent, but not that there are sub-components or how many. In principle, you can swap one implementation of grandparent out for another that doesn't have multiple layers. Or has even more layers to get to child. And you could put child into a top-level component.

您已经了解全局事件总线的概念.但是，总线不必是全球性的.您可以将其传递到道具链中.(您可以使用 greatgrandparent 本身作为总线，但这会将其暴露给它的孩子；制造真正的总线要更卫生.)

You already know about the notion of a global event bus. A bus doesn't have to be global, though. You can pass it down the props chain. (You could use greatgrandparent itself as the bus, but that would expose it to its children; better hygiene to make a real bus.)

这将顶级组件与子组件区分开来:子组件将收到一个 bus 道具来执行它帮助实现的顶级组件的功能.一个顶级组件将发起总线.

This distinguishes top-level components from sub-components: a sub-component will receive a bus prop to perform the functions of the top-level component that it helps to implement. A top-level component will originate the bus.

Vue.component('child', {
  template: `<div v-on:click="clicked">Click me</div>`,
  props: ['bus'],
  methods: {
    clicked: function() {
      this.bus.$emit('clicked', 'hello');
    },
  },
});

Vue.component('parent', {
  template: `<child :bus="bus"></child>`,
  props: ['bus']
});


Vue.component('grandparent', {
  template: `<parent :bus="bus"></parent>`,
  props: ['bus']
});

Vue.component('greatgrandparent', {
  template: `<grandparent :bus="bus" v-on:clicked="clicked"></grandparent>`,
  data() {
    return {
      bus: new Vue()
    };
  },
  created() {
    this.bus.$on('clicked', this.clicked);
  },
  methods: {
    clicked: function(msg) {
      console.log('message from great grandchild: ' + msg);
    },
  },
});

new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<greatgrandparent id="app"></greatgrandparent>

这篇关于曾祖父组件中的VueJS孙组件调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！