Вызов метода Vue другого компонента

Question

У меня есть два компонента: компонент Card и модальный компонент, модальный компонент содержит модальные элементы, в моем компоненте Card я хотел бы иметь кнопку, которая открывает модальное окно моего модального компонента.Как мне это сделать, пока я сделал это:

Компонент Моя карта:

<template>
    <v-layout v-if="visible">
        <v-flex xs12 sm6 offset-sm3>
            <v-card>
                <v-card-title primary-title>
                    <div>
                        <h3 class="headline mb-0">test</h3>
                        <div>test</div>
                    </div>
                </v-card-title>

                <v-divider light></v-divider>

                <v-card-actions>
                <v-btn
                    color="primary"
                    dark
                    @click="dialog = true"
                >
                Open Dialog
                </v-btn> <!-- open modal dialog of modal component? -->

                    <tenant-number-modal></tenant-number-modal>
                </v-card-actions>

                <input type="hidden" id="tenant-id" :value=tenantId>
            </v-card>
        </v-flex>
    </v-layout>
</template>

<script>
    export default {
        data () {
            return {
                visible: true,
                dialog: false,
                uniqueTenantNumber: ''
            }
        },
    }
</script>

Мой Модальный компонент:

<template>
    <v-layout row justify-center>
        <v-btn
            color="primary"
            dark
            @click="dialog = true"
        > <!-- this calls the modal but only in this component -->
        Open Dialog
        </v-btn>

        <v-dialog
            v-model="dialog"
            max-width="290"
        >
            <v-card>
                <v-card-title class="headline">test</v-card-title>
            </v-card>
        </v-dialog>
    </v-layout>
</template>

<script>
  export default {
    data () {
      return {
        dialog: false
      }
    }
  }
</script>

Answer 1

Вы можете вызвать метод другого компонента, используя ref.

    <v-card-actions>
      <v-btn
       color="primary"
       dark
       @click="openModal">
      Open Dialog
      </v-btn> <!-- open modal dialog of modal component? -->
      <tenant-number-modal ref="modal"></tenant-number-modal>
    </v-card-actions>
...
<script>
   export default {
      data () {
         return {
            //visible: true,
            //dialog: false,
            //uniqueTenantNumber: ''
         }
      },
      methods: {
         openModal() {
            this.$refs.modal.showModal();
         }
      }
   }
</script>

Ваш модальный компонент:

<template>
    <v-layout row justify-center>
    ...
        <v-dialog
            v-model="dialog"
            max-width="290">
            <v-card>
                <v-card-title class="headline">test</v-card-title>
            </v-card>
        </v-dialog>
    </v-layout>
</template>

<script>
  export default {
    data () {
      return {
        dialog: false
      }
    },
    methods: {
       showModal() {
       this.dialog = true;
       }
    }
  }
</script>

Answer 2

Что вы можете сделать, это создать шину событий.Это позволит вам отправлять сообщения на 1+ компонентов одновременно.Как только вы отправите сообщение, все компоненты, которые прослушивают, будут выполнены.

Сначала вам нужно создать шину:

bus.js

import Vue from 'vue';
export const EventBus = new Vue();

Далее в компоненте, который будет отправлять вызываемое вами сообщение EventBus.$emit(name, data)

componentA.js

import { EventBus } from './bus.js';

export default {
  methods: {
    emitGlobalClickEvent() {
      EventBus.$emit('i-got-clicked', 'extra data');
    }
  }
}

Затем в других ваших компонентах вам просто нужнослушать событие.Следующее можно добавить к компоненту, и вам просто нужно использовать EventBus.$on(name, handle) или, если вы хотите слушать только один раз, используйте EventBus.$once(name, handle).

componentB.js

import { EventBus } from './bus.js';

export default {
  created() {
    EventBus.$on('i-got-clicked', data => {
      console.log(data)
      // You can then call your method attached to this component here
      this.openModal()
    });
  },
  methods: {
    openModal() {
      console.log('I am opening')
    }
  }
}