在父组件中使用的Vue模态组件 [英] Vue modal component using in parent component
问题描述
我正在用Vue构建简单的模态组件.我想在父级组件中使用此组件,并能够从父级切换它.
I'm building simple modal component with Vue. I want to use this component in a parent components and to be able to toggle it from the parent.
这是我现在的模态组件代码:
This is my code now of the modal component:
<script>
export default {
name: 'Modal',
data() {
return {
modalOpen: true,
}
},
methods: {
modalToggle() {
this.modalOpen = !this.modalOpen
},
},
}
</script>
<template>
<div v-if="modalOpen" class="modal">
<div class="body">
body
</div>
<div class="btn_cancel" @click="modalToggle">
<i class="icon icon-cancel" />
</div>
</div>
</template>
我使用 v-if 来切换渲染,它可以与我在模态组件内部创建的按钮一起使用.
I use the v-if to toggle the rendering and it works with the button i created inside my modal component.
但是我的问题是:我不知道如何使用父组件中的简单按钮来切换它.我不知道如何从模态组件访问modalOpen数据
However my problem is: I don't know how to toggle it with simple button from parent component. I don't know how to access the modalOpen data from the modal component
推荐答案
好的,让我们尝试正确地做.我建议使用成熟的组件,并使用父组件或其他包含组件中的v模型控制模态窗口的打开和关闭.
Ok, let's try to do it right. I propose to make a full-fledged component and control the opening and closing of a modal window using the v-model in parent components or in other includes.
1)我们需要在子属性"props"中声明prop-"value".
1) We need declare prop - "value" in "props" for child component.
<script>
export default {
name: 'Modal',
props: ["value"],
data() {
return {
modalOpen: true,
}
},
methods: {
modalToggle() {
this.modalOpen = !this.modalOpen
},
},
}
</script>
2)替换为以下内容的"modalToggle":
2) Replace your "modalToggle" that:
modalToggle() {
this.$emit('input', !this.value);
}
3)在父组件或其他组件中,声明"modal = false"变量,并在组件v-model ="modal"上使用,并在模态变量上使用任何控制按钮.
3) In parent components or other includes declare "modal=false" var and use on component v-model="modal" and any control buttons for modal var.
摘要
<template>
<div v-if="value" class="modal">
<div class="body">
body
</div>
<div class="btn_cancel" @click="modalToggle">
<i class="icon icon-cancel" />
</div>
</div>
</template>
<script>
export default {
name: "Modal",
props: ["value"],
methods: {
modalToggle() {
this.$emit("input", !this.value);
}
}
};
</script>
示例:
Vue.component('modal', {
template: '<div v-if="value" class="modal"><div class="body">modal body</div><div class="btn_cancel" @click="modalToggle">close modal<i class="icon icon-cancel" /></div></div>',
props: ["value"],
methods: {
modalToggle() {
this.$emit('input', !this.value);
}
}
});
// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
el: '#app',
data:() =>({
modal: false
}),
methods: {
openModal() {
this.modal = !this.modal;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div @click="openModal">Btn modal</div>
<modal v-model="modal"></modal>
</div>
这篇关于在父组件中使用的Vue模态组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!