What is the best approach to developing Vue components with unique templates while maintaining the same functionality without duplicating code?

Question

What is the best approach to developing Vue components with unique templates while maintaining the same functionality without duplicating code?

I am working on a project to develop a custom and versatile datatable component. My goal is to be able to adjust the appearance of the datatable on each page, while maintaining consistent functionality. I want to pass data rows into the component and have the flexibility to customize the layout accordingly. However, I am struggling to figure out how to achieve this. Here's an illustration of my dilemma:

For instance, one page may require this template:

<datatable>
    <div v-for="row in rows" class="header" @click="sortBy(row.field)">row.title</div>
    <div v-for="row in rows">row.value</div>
</datatable>

While another page demands a different layout:

<datatable>
    <h1>
        <span v-for="row in rows" @click="sortBy(row.field)">row.title</span>
    </h1>

    <h3 v-for="row in rows">row.value</h3>
</datatable>

I am grappling with a solution to integrate the sortBy function inside the component. Is there a way to make this work seamlessly?

javascript vue.js components vue-component

Answer 1

Answer №1

1. Building a New Component

Component Location: ./src/components/dataTableComponent.vue

<template>
    <datatable>

        <div v-if="!withTitles">
            <div v-for="(row, index) in rows" :key="index" class="header" @click="sortBy(row.field)">row.title</div>
            <div v-for="(row, index) in rows" :key="index">row.value</div>
        </div>

        <div v-id="withTitles">
            <h1>
                <span v-for="(row, index) in rows" :key="index" @click="sortBy(row.field)">row.title</span>
            </h1>
            <h3 v-for="(row, index) in rows" :key="index">row.value</h3>
        </div>

    </datatable>
</template>
<script>
export default {
    name: 'dataTableComponent',
    props: ['rows', 'withTitles'],
    data () {
        return {

        }
    },
    methods: {
        sortBy(field){
            //Sorting logic for this.rows
        }
    }
}
</script>

2. Implementing the Component

<template>
    <div>

        <h2>No Titles</h2>
        <dataTableComponent :rows="rows" :withTitles="true">
        
        <h2>With Titles</h2>
        <dataTableComponent :rows="rows">

    </div>
</template>
<script>
import dataTableComponent from 'src/components/dataTableComponent.vue';

export default {
    components: {dataTableComponent},
    data () {
        return {
            rows: ['AAA', 'BBB', 'CCC']
        }
    }
}
</script>

Explore Vue Documentation for Additional Options

Learn more about Vue components: https://v2.vuejs.org/v2/guide/components.html
Understand Vue components props: https://v2.vuejs.org/v2/guide/components-props.html

Answer 2

1. Building a New Component

Component Location: ./src/components/dataTableComponent.vue

<template>
    <datatable>

        <div v-if="!withTitles">
            <div v-for="(row, index) in rows" :key="index" class="header" @click="sortBy(row.field)">row.title</div>
            <div v-for="(row, index) in rows" :key="index">row.value</div>
        </div>

        <div v-id="withTitles">
            <h1>
                <span v-for="(row, index) in rows" :key="index" @click="sortBy(row.field)">row.title</span>
            </h1>
            <h3 v-for="(row, index) in rows" :key="index">row.value</h3>
        </div>

    </datatable>
</template>
<script>
export default {
    name: 'dataTableComponent',
    props: ['rows', 'withTitles'],
    data () {
        return {

        }
    },
    methods: {
        sortBy(field){
            //Sorting logic for this.rows
        }
    }
}
</script>

2. Implementing the Component

<template>
    <div>

        <h2>No Titles</h2>
        <dataTableComponent :rows="rows" :withTitles="true">
        
        <h2>With Titles</h2>
        <dataTableComponent :rows="rows">

    </div>
</template>
<script>
import dataTableComponent from 'src/components/dataTableComponent.vue';

export default {
    components: {dataTableComponent},
    data () {
        return {
            rows: ['AAA', 'BBB', 'CCC']
        }
    }
}
</script>

Explore Vue Documentation for Additional Options

Learn more about Vue components: https://v2.vuejs.org/v2/guide/components.html
Understand Vue components props: https://v2.vuejs.org/v2/guide/components-props.html

Answer 3

Answer №2

One useful tool in Vue is the slot feature, which allows you to customize components. Check out more information about slots here.

datatable.vue

<template>
  <div>
    <slot name="table-slot"></slot>
  </div>
</template>

<script>
  export default {
    name: 'datatable'
  }
</script>

sampleComp1.vue

<template>
  <div>
    <datatable>
        <div slot="table-slot">
            // include your template data here
        </div>
    </datatable>
  </div>
 </template>

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

   export default {
     name: 'sampleComp1',
     data() {
        rows: [] // populate this array with your data
     },
     components: {
        datatable
     },
     methods: {
        sortBy(field) {
            // perform necessary actions here
        }
        
     }
   }
</script>

sampleComp2.vue

<template>
  <div>
    <datatable>
        <div slot="table-slot">
            // include your template data here
        </div>
    </datatable>
  </div>
 </template>

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

  export default {
    name: 'sampleComp2',
    data() {
        rows: [] // populate this array with your data
    },
    components: {
        datatable
    },
    methods: {
        sortBy(field) {
            // perform necessary actions here
        }
    }
  }
 </script>

Answer 4

One useful tool in Vue is the slot feature, which allows you to customize components. Check out more information about slots here.

datatable.vue

<template>
  <div>
    <slot name="table-slot"></slot>
  </div>
</template>

<script>
  export default {
    name: 'datatable'
  }
</script>

sampleComp1.vue

<template>
  <div>
    <datatable>
        <div slot="table-slot">
            // include your template data here
        </div>
    </datatable>
  </div>
 </template>

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

   export default {
     name: 'sampleComp1',
     data() {
        rows: [] // populate this array with your data
     },
     components: {
        datatable
     },
     methods: {
        sortBy(field) {
            // perform necessary actions here
        }
        
     }
   }
</script>

sampleComp2.vue

<template>
  <div>
    <datatable>
        <div slot="table-slot">
            // include your template data here
        </div>
    </datatable>
  </div>
 </template>

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

  export default {
    name: 'sampleComp2',
    data() {
        rows: [] // populate this array with your data
    },
    components: {
        datatable
    },
    methods: {
        sortBy(field) {
            // perform necessary actions here
        }
    }
  }
 </script>

What is the best approach to developing Vue components with unique templates while maintaining the same functionality without duplicating code?

Answer №1

1. Building a New Component

2. Implementing the Component

Explore Vue Documentation for Additional Options

Answer №2

Similar questions

Guide to utilizing a shared route function across various routes in express.js

What is the process for dynamically looping through a table and adding form data to the table?

Finding the Determinant of a 4x4 Matrix: A Ray-Tracing Adventure in JavaScript

Having trouble with parsing the .mjs module from Iconify in Vue 3 CLI project that utilizes the Composition API and TypeScript

Angular identifies when a user navigates away from a page

Steps for modifying a cell within a table using a button click

Tips for utilizing the nth-child selector to exclude hidden divs

Combining strings in a loop using Javascript

Creating operations in Angular using the Model View Controller (MVC)

Spring Boot is having trouble identifying the JavaScript files

Using JavaScript to create a tree structure with hierarchical organization in JSON

Configuring Laravel to operate on a specific port number?

Converting a Click Event to a Scheduled Event using JavaScript and AJAX

Using the scrollIntoView() method in VUE.js to center an li element within a component

Stop the execution of javascript code based on the screen width

Displaying various Ajax html responses

How to Efficiently Remove Array Elements by Index in Typescript

Encountering the error 'node' getProperty of undefined while trying to retrieve data from an array stored in my state variable

Increase the div id using jQuery

Using TypeScript gives you the ability to specify the type of an object while destructuring it,