I am currently working on a parent component that includes various graphics. Depending on the specific needs, I want to pass a particular graphic (child component) dynamically to another component. However, I am unsure of how to achieve this for the user.
Here is the code for my HTML charts (chart.vue):
<template>
<div >
<bars v-if="type == 'bar'">
<div class="row gutter-sm">
<div class="col-md-3">
<apexchart ref="chart1" type="bar" :options="options" :series="updatedData"></apexchart>
</div>
</div>
<div class="col-md-3">
<apexchart ref="chart3" type="bar" :options="options3" :series="updatedData"></apexchart>
</div>
</bars>
<lines v-if="type == 'line'">
<div class="row gutter-sm">
<div class="col-md-3">
<apexchart ref="chart4" type="line" :options="options4" :series="updatedData"></apexchart>
</div>
</div>
</lines>
</div>
<template>
If I intend to pass on bar graphics to my menu.vue component, would it look like this?
Here is the code for my HTML menu:
<template>
<div >
<table class="data-table-2" style="min-width: 800px">
<charts type="bar"/>
</table>
</div>
<template>
Scripts for the menu:
<script>
import charts from "./charts.vue"
export default {
name: 'menu',
components: {
charts
}
}
</script>