Usar un b-modal (buefy) como componente hijo administrado desde componente padre en VUE 2

Si necesitas crear un componente hijo que contenga un componente tipo b-modal que debe ser administrado desde un componente padres debes crearlo de esta manera.

Componente Hijo

Este componente encapsula el b-modal y recibe una prop booleana show para controlar su visibilidad. También emitirá un evento cuando el modal se cierre:

<template>
  <b-modal :active.sync="localShow" has-modal-card @close="closeModal">
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">Modal Hijo</p>
      </header>
      <section class="modal-card-body">
        <p>Contenido del modal</p>
      </section>
      <footer class="modal-card-foot">
        <b-button @click="closeModal">Cerrar</b-button>
      </footer>
    </div>
  </b-modal>
</template>

<script>
export default {
  name: "ChildModal",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      localShow: this.show,
    };
  },
  watch: {
    show(val) {
      this.localShow = val;
    },
    localShow(val) {
      if (!val) {
        this.$emit('close');
      }
    }
  },
  methods: {
    closeModal() {
      this.localShow = false;
    },
  },
};
</script>

Componente padre

Controla cuándo mostrar el modal hijo, y reacciona cuando este se cierra:

<template>
  <div>
    <b-button @click="showModal = true">Abrir Modal</b-button>

    <child-modal :show="showModal" @close="showModal = false" />
  </div>
</template>

<script>
import ChildModal from './ChildModal.vue';

export default {
  name: "ParentComponent",
  components: {
    ChildModal,
  },
  data() {
    return {
      showModal: false,
    };
  },
};
</script>

🧠 Explicación rápida:

• :show="showModal" → el padre pasa la señal de apertura.
• @close="showModal = false" → el hijo emite el cierre, el padre responde.
• En el hijo, se usa .sync sobre :active de b-modal para hacer binding bidireccional, pero solo a nivel interno (localShow), así se evita mutar directamente props.