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+个组件发送消息。一旦您发出消息，那么所有正在侦听的组件都将执行。

首先，您需要创建总线：

总线.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')
}
}
}

Answer 3

For从任何其他组件调用组件的任何方法

将一个$on函数从挂载部分添加到$root实例。则从访问CCD_ 7并调用CCD_。

关于第一个组件：

mounted() {
this.$root.$on('mySpecialName', () => {
// your code goes here
}
}

关于第二个组件：

someComponent2Method: function(){
// your code here
this.$root.$emit('mySpecialName') //like this
},

Answer 4

TestModal.vue：

<template>
<v-dialog v-model="modalState" max-width="500px">
<v-card>
<v-card-title>
This is a modal in another component.
</v-card-title>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" @click="modalState = false">
Close
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
data() {
return {
modalState: false,
}
},
methods: {
showModal() {
this.modalState = true
},
},
}
</script>

在您的父文件(index.vue(中：

<template>
<v-layout column justify-center align-center>
<v-flex xs12 sm8 md6>
<test-modal ref="customModal" />
<v-btn large color="primary" @click.stop="runModal">
Run Modal
</v-btn>
</v-flex>
</v-layout>
</template>
<script>
import TestModal from '~/components/TestModal.vue'
export default {
components: {
TestModal,
},
methods: {
runModal() {
this.$refs.customModal.showModal()
},
},
}
</script>