Passing parent vm as a prop to a component-CodePudding

So I’m building a Nuxt app for working with docs (in a broad sense), and it will have a menu, which I will obviously make a component. The menu will be home to lots of actions on the doc itself, such as opening/saving files, editing, etc. etc.

I know the standard way to pass info from a component to its parent (the doc vm in this case) is via messages, but it feels like a bit of an overkill, what with the syntax (emit handlers just don’t feel natural to me in this case) and whatnot.

For this reason I was wondering why can’t I just pass the parent vm as a prop to the menu component? It will contain all kinds of methods, and I will be able to easily invoke them via the menu. Something like:

Parent (Document.vue):

<template>
<main-menu :document='vm'/>
</template>

<script>
import MainMenu from '~/components/MainMenu.vue'

export default {
  data(): {
    return {
      vm: this,
      //...
    }
  },
  methods: {
    save() {
      //...
    }
  }
//...
</script>

Menu component (MainMenu.vue):

<template>
<button @click='document.save()'>Save document</button>
</template>

<script>
export default {
  props = ['document']
}
</script>

The question: Is there something intrinsically bad in this approach?

(I imagine this could be problematic if the app architecture could change, but it’s hard to imagine that I would for some reason need a menu without an underlying document.)

CodePudding user response：

IF your Menu is always the child of the component, then you don't have to pass your parent. It is already held in a Vue variable called this.$parent.

I made a little sandbox to give you an example.

The parent has a function, for example:

/// PARENT

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  methods: {
    iExist(add) {
      console.log("I am in parent"   add);
    },
  },
};

Then you can call it from child with this.$parent.iExist('something').

Since this.$parent is not defined when the template is being evaluated, we have to make a method in the child as well, to call(super) the corresponding function on it's parent.

/// CHILD
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="iExist(', but was called from child')">Click Me</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  methods: {
    iExist(add) {
      this.$parent.iExist(add);
    },
  },
};
</script>

CodePudding user response：

The question: Is there something intrinsically bad in this approach?

(I imagine this could be problematic if the app architecture could change, but it’s hard to imagine that I would for some reason need a menu without an underlying document.)

Yes, this is bad design. Parents can be aware of children, children shouldn't be aware of parents. A child could be tested in isolation, or be nested inside wrapper component that doesn't have this method.

As another answer suggests, a way to access a parent is to use $parent property. This part was borrowed in Vue from AngularJS 1.x, accessing it was considered a bad practice even then.

This is generally achieved by providing a callback from a parent that does exactly a desired thing, without allowing to access the whole instance and break the encapsulation. It's unnecessary to explicitly define callback function in Vue because this is naturally provided by Vue template syntax:

In a parent:

<child @save="save()">

In a child:

<button @click="$emit('save')">

In case of deeply nested components the event can be passed through them to a parent.