CODEWITHSUNDEEP
vue.jsvue-componentvue-cli-3
JYL
JYL

Reputation: 203

is it correct global component communication in vue?

i make modal popup components myPopup.vue for global.

and import that in App.vue and main.js i use this for global, define some object Vue.prototype

make about popup method in Vue.prototype like, "show" or "hide", any other.

but i think this is maybe anti pattern.. i want to find more best practice.

in App.vue

<div id="app>
  <my-popup-component></my-popup-conponent>
  <content></content>
</div>

main.js

...
Vue.prototype.$bus = new Vue(); // global event bus
Vue.prototype.$popup = {
  show(params) {
    Vue.prototype.$bus.$emit('showPopup', params);
  },
  hide() {
    Vue.prototype.$bus.$emit('hidePopup');
  }
}

Vue.component('my-popup-component', { ... });
...

myPopup.vue

....
export default {
...

  created() {
    this.$bus.$on('showPopup', this.myShow);
    this.$bus.$on('hidePopup', this.myHide);
  }
...

need-popup-component.vue

methods: {
  showPopup() {
    this.$popup.show({
      title: 'title',
      content: 'content',
      callback: this.okcallback
    }); 
  }
}

It seems to be works well, but i don't know is this correct. Is there any other way?

Upvotes: 2

Views: 1646

Answers (2)

Slim
Slim

Reputation: 1276

I was very surprised while reading your solution, but if you feel it simple and working, why not?

I would do this:

  • Add a boolean property in the state (or any data needed for showing popup), reflecting the display of the popup
  • use mapState in App.vue to bring the reactive boolean in the component
  • use v-if or show in App.vue template, on the popup declaration
  • create a 'showPopup' mutation that take a boolean and update the state accordingly
  • call the mutation from anywhere, anytime I needed to show/hide the popup

That will follow the vue pattern. Anything in state, ui components reflect the state, mutations mutates the state.

Your solution works, ok, but it doesn't follow vue framework, for exemple vue debug tools will be useless in your case. I consider better to have the minimum of number of patterns in one app, for maintenance, giving it to other people and so on.

Upvotes: 2

Satyam Pathak
Satyam Pathak

Reputation: 6932

You somehow try to create global component, which you might want to consume in your different projects.

Here is how I think I would do this -

How do I reuse the modal dialog, instead of creating 3 separate dialogs

Make a separate modal component, let say - commonModal.vue.

Now in your commonModal.vue, accept single prop, let say data: {}.

Now in the html section of commonModal 

<div class="modal">
  <!-- Use your received data here which get received from parent -->
  <your modal code />
</div>

Now import the commonModal to the consuming/parent component. Create data property in the parent component, let say - isVisible: false and a computed property for the data you want to show in modal let say modalContent.

Now use it like this

<main class="foo">
   <commonModal v-show="isVisible" :data="data" />
   <!-- Your further code -->
</main>

The above will help you re-use modal and you just need to send the data from parent component.

How do I know which modal dialog has been triggered?

Just verify isVisible property to check if modal is open or not. If isVisible = false then your modal is not visible and vice-versa

How my global dialog component will inform it's parent component about its current state

Now, You might think how will you close your modal and let the parent component know about it. On click of button trigger closeModal for that

Create a method - closeModal and inside commonModal component and emit an event.

closeModal() { 
  this.$emit('close-modal')
}

Now this will emit a custom event which can be listen by the consuming component.

So in you parent component just use this custom event like following and close your modal

<main class="foo">
  <commonModal v-show="isVisible" :data="data" @close- modal="isVisible = false"/>
  <!-- Your further code -->
</main>

Upvotes: 0

Related Questions