There is such an artificial example:

<body> <button>open popup #1</button> <popup inline-template > <div class="popup popup_1"> Content #1 </div> </popup> <popup inline-template > <div class="popup popup_2"> Content #2 </div> </popup> </body> ... <script> Vue.component('popup', { methods: { open: function() { // ... }, } }); var app = new Vue({ el: 'body', }); </script>

How to make that when you click on the button, the open method for the component with the text “Content # 1” is called.

  • Try myclabs.imtqy.com/jquery.confirm , you will like it :) - And
  • @And, thanks for the reply, but that's not the point, I need to figure out how to transfer data between components of Vue.js. - Maxim Zasorin
  • Why so much lib? When confirm works much easier and more beautiful. But if you want, then pidyetsya study api, and even may have to intervene in Vue, if there is no mechanism for tranpartitioning the windows. But even so, .confirm is much easier to fix under needed. :) - And
  • @MaximZasorin, worth looking at help on components - Grundy

2 answers 2

The simplest solution to the forehead: at the component, we get an additional variable isShow: false.

 <template id="template-popup-component"> <button v-on:click="togglePopup">Toggle this popup</button> <div v-if="isShow" class="popup-content"> <slot></slot> </div> </template> <popup> Hello, World! </popup> 
 Vue.component('popup', { template: '#template-popup-component', data: function() { return { isShow: false } }, methods: { togglePopup: function() { this.isShow = !this.isShow; }, } }); var app = new Vue({ el: 'body', });

The solution to this problem on Codepen

  • Thanks for the help, but I needed to call the method of a specific component of the page, I decided through the ref directive and the $refs object. - Maxim Zasorin

Thank you all, figured out, the components on the page can be named just like the DOM elements, but through the ref directive, and then access them through the $refs object.

 <body> <button @click="$refs.popup1.open()" > open popup #1 </button> <popup v-ref:popup-1 inline-template > <div v-if="data.open" class="popup popup_1" > Content #1 </div> </popup> <popup v-ref:popup-2 inline-template > <div v-if="data.open" class="popup popup_2"> Content #2 </div> </popup> </body> ... <script> Vue.component('popup', { data: function() { return { data: { open: false } } }, methods: { open: function() { this.data.open = true; }, } }); var app = new Vue({ el: 'body', }); </script>

https://jsfiddle.net/maximzasorin/g8kjn9ws/