VUE

Acciones Dinámicas {{Botones y Datos}}

Introducción: en este ejemplo veremos como crear un componente el cual

tendrá botones y texto dinámico mostrado por otros componentes

1.- Paso crear el componente Padre que actuara Dinámicamente

<section class="admin-header">
<v-layout class="layout-header">
<v-flex class="header-title">
// tomado directamente de props
<span class="title">{{ title }}</span>
<span class="subtitle">
{{ subtitle }}
<span class="subtitle-secondary">{{subtitleSecondary}}</span>
</span>
</v-flex>
<v-flex class="accions">
<div class="box-buttons">
<div class="actions-buttons">
//@clicks son el nombre que deben de tener los otros componentes para
//que se accionen deben de tener el evento this
<v-btn class="button" v-if="showImport" @click="clickImport(this)">IMPORTAR</v-btn>
<v-btn class="button" v-if="showExport" @click="clickExport(this)">EXPORTAR</v-btn>
<v-btn class="create-button" v-if="showCreate" @click="clickCreate(this)">{{buttonCreteName}}</v-btn>
</div>
</div>
</v-flex>
</v-layout>
</section>

En el JS agregamos las propiedades que se compartirán

props: { title: '',
subtitle: '',
subtitleSecondary: '',
buttonCreteName: { default: 'CREAR' }
},

En el Data agregamos las acciones que nos harán visualizar el componente

data () {
return {
 showImport: false,
showExport: false,
showCreate: false
}
}

//this.$listerners escucha el evento presionado

created () {
this.showImport = !!(this.$listeners && this.$listeners.clickImport)
this.showExport = !!(this.$listeners && this.$listeners.clickExport)
this.showCreate = !!(this.$listeners && this.$listeners.clickCreate)
}

//son la acción de los tres botones creados

methods: {
clickImport (e) {
this.$emit('clickImport', e)
},
clickExport (e) {
this.$emit('clickExport', e)
},
clickCreate (e) {
this.$emit('clickCreate', e)
}
}

En el componente hijo
Title es el props que le pasamos al igual que subtitle
@clickCreate
@clickImport
@clickExport
Son las acciones creadas en el componente padre solo le pasamos los
métodos que queremos que tengan función tomando el nombre del método
padre
<admin-header title="Catálogos" subtitle="Todas los catálogos"
@clickCreate="openModal"
@clickImport="importCatalog"
@clickExport="exportCatalog" ></admin-header>

En el Js del componente Hijo estos son los métodos usados y tomando la

función del padre
exportCatalog: function () {
 let url = process.env.VUE_APP_API_URL + '/catalog/api/catalogs/downloadCsv'
fetch(url)
.then(resp => resp.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob)
const a = document.createElement('a')
a.style.display = 'none'
a.href = url
a.download = 'catalog.csv'
document.body.appendChild(a)
a.click()
window.URL.revokeObjectURL(url)
})
.catch(() => alert('oh no!'))
},
importCatalog: function () {
console.log('import catalog')
},
openModal: function (data) {
// console.log(data)
this.titleModal = 'Crear Catalogo'
this.btnActiveEdit = false
this.btnActiveAdd = true
this.dialogCatalog = true
}