Actualmente, tengo que agregar un componente SnackBar en mi sitio web. El resultado esperado es que la barra de bocadillos aparecerá cuando el usuario haga clic en el botón Enviar. ¿Cómo paso mi componente snackbar a mi botón ubicado dentro de mi archivo Add.vue ? Esto se debe a que quiero reutilizar mi componente snackbar porque hay varios formularios de envío.
SnackBar.vue dentro del archivo del componente
<template> <div class="text-center ma-2"> <v-snackbar v-model="snackbar" > {{ text }} <template v-slot:action="{ attrs }"> <v-btn color="pink" text v-bind="attrs" @click="snackbar = false" > Close </v-btn> </template> </v-snackbar> </div> </template> <script> export default { data: () => ({ snackbar: false, text: `Hello, I'm a snackbar`, }), } </script>Añadir.vue
<template> <base-form title="Add"> <template v-slot:actions> <v-btn color="secondary" type="submit" > <div>Save</div> </v-btn> </template> </base-form> </template>Puede importar su componente de refrigerio y pasar prop:
Vue.component('snack', { template: ` <div class="text-center ma-2"> <v-snackbar v-model="snackbar" > {{ text }} <template v-slot:action="{ attrs }"> <v-btn color="pink" text v-bind="attrs" @click="$emit('closed', false)" > Close </v-btn> </template> </v-snackbar> </div> `, props: { snackbar: { type: Boolean, default: false } }, data: () => ({ text: `Hello, I'm a snackbar`, }), }) new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ show: false, }), methods: { submit(val) { this.show = val } } }) <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <div id="app"> <v-app> <v-main> <v-container> <v-btn color="secondary" type="submit" @click="submit(true)" > <div>Save</div> </v-btn> <snack :snackbar="show" @closed="submit(false)"></snack> </v-container> </v-main> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>