If you need to create a child component that has a b-model which will be managed from parent component, you have to wirte it as:<\/p>\n\n\n\n
This component has the It controls when the modal is showed or is closed.<\/p>\n\n\n\n If you need to create a child component that has a b-model which will be managed from parent component, you have to wirte it as: …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-428","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nb-modal<\/code> and receives the prop<\/code> bool show<\/code> to control their visibility. Moreover, this will emit an event when the modal is closed:<\/p>\n\n\n\n<template>\n <b-modal :active.sync=\"localShow\" has-modal-card @close=\"closeModal\">\n <div class=\"modal-card\">\n <header class=\"modal-card-head\">\n <p class=\"modal-card-title\">Modal Hijo<\/p>\n <\/header>\n <section class=\"modal-card-body\">\n <p>Contenido del modal<\/p>\n <\/section>\n <footer class=\"modal-card-foot\">\n <b-button @click=\"closeModal\">Cerrar<\/b-button>\n <\/footer>\n <\/div>\n <\/b-modal>\n<\/template>\n\n<script>\nexport default {\n name: \"ChildModal\",\n props: {\n show: {\n type: Boolean,\n default: false,\n },\n },\n data() {\n return {\n localShow: this.show,\n };\n },\n watch: {\n show(val) {\n this.localShow = val;\n },\n localShow(val) {\n if (!val) {\n this.$emit('close');\n }\n }\n },\n methods: {\n closeModal() {\n this.localShow = false;\n },\n },\n};\n<\/script>\n<\/code><\/pre>\n\n\n\nParent Component<\/h2>\n\n\n\n
<template>\n <div>\n <b-button @click=\"showModal = true\">Abrir Modal<\/b-button>\n\n <child-modal :show=\"showModal\" @close=\"showModal = false\" \/>\n <\/div>\n<\/template>\n\n<script>\nimport ChildModal from '.\/ChildModal.vue';\n\nexport default {\n name: \"ParentComponent\",\n components: {\n ChildModal,\n },\n data() {\n return {\n showModal: false,\n };\n },\n};\n<\/script><\/code><\/pre>\n\n\n\n🧠 Explanation:<\/h2>\n\n\n\n
\n
:show=\"showModal\"<\/code> \u2192 father gives the open sign.<\/li>\n\n\n\n@close=\"showModal = false\"<\/code> \u2192 child component emit the close sign.<\/li>\n\n\n\n.sync<\/code> on :active<\/code> of b-modal<\/code> to do bidirectional binding, but it is only at internal level (localShow<\/code>).<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"