我有两个组件,一个Card组件和一个modal组件,该modal组件包含modal元素,在我的Card组件中,我想要一个按钮来打开我的modal组件的modal Window。我该如何处理,到目前为止,我已经做到了:
我的卡组件:
<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>
答案 0 :(得分:2)
您可以使用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>
答案 1 :(得分:1)
您可以做的是创建事件总线。这将使您可以立即将消息发送到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')
}
}
}
答案 2 :(得分:0)
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>
答案 3 :(得分:0)
用于从任何其他组件调用组件的任何方法
从安装的部分向$on
实例添加$root
函数。然后通过访问$root
并调用$emit
函数的任何其他组件来调用。
在第一个组件上:
mounted() {
this.$root.$on('mySpecialName', () => {
// your code goes here
}
}
第二部分:
someComponent2Method: function(){
// your code here
this.$root.$emit('mySpecialName') //like this
},