How to pass data to a component template

Question

Currently I'm defining several component template(s) within a single vue component. I've defined some as strings, however it makes it somewhat incomprehensible if it gets more complex. So instead I'm making it return a separate component as a template. However I'm not sure how to pass data to the component.

This is a sample of the current approach for one of my component templates within my vue component. It's returning the template as a string and renders the html.

progessTemplate: function () {
                    return {
                        template: ('progessTemplate', {
                            template: `
                                    <div id="myProgress" class="pbar">
                                        <div id="myBar" :class="barColor" :style="{'width': width}">
                                            <div id="label" class="barlabel" v-html=width ></div>
                                        </div>
                                    </div>`,
                            data: function () {
                                return { data: {} };
                                },
                            computed: {
                                width: function () {
                                    if (this.data.SLA <= 20) {
                                        this.data.SLA += 20;
                                    }
                                    return this.data.SLA + '%';
                                },
                                barColor: function(){
                                    if(this.data.SLA > 60 && this.data.SLA <= 80){
                                        return 'bar progressWarning';
                                    }else if(this.data.SLA > 80){
                                        return 'bar progressUrgent';
                                    }
                                }
                            }
                        })
                    }
                },

I'd like to avoid this approach and call a separate file instead.

I import the component into my vue file

    import QueryDetailTemplate from '../../ej2/queryDetailTemplate';

and within my main vue file I have this function 'QueryDetailTemplate':

export default{
    data(){
        return{
        data: [...],
        QueryDetailTemplate: function(){
            return {
                    template: QueryDetailTemplate,
                    props:{
                           test: 'Hello World',
                           },
                   };
            },//end of QueryDetailTemplate
        }//end of data
    ...
}

In my QueryDetailTemplate.vue this is my code:

<template>
    <div>
        Heyy {{test}} //undefined
    </div>
</template>
<script>
    export default{
        props: ['test'],

        created(){
            console.log(this.test); //shows undefined
        }
    }
</script>

It renders the 'Heyy' that's hardcoded but it doesn't get the 'test' prop.

Appreciate any pointers

Why is QueryDetailTemplate a data property of your main component, and how are you rendering it? — Decade Moon
@DecadeMoon I'm implementing a detail row for the data grid component from the Essential JS2 for Vue library. QueryDetailTemplate would be detailTemplate in this example (click on source to view the code) ej2.syncfusion.com/vue/demos/#/material/grid/… In the example, they don't mention how the template is actually setup or how props are passed from the main component to the child. — Ash

Cathy Ha Cathy Ha · Accepted Answer · 2019-08-10T00:28:48

I'm not quite sure what you're trying to achieve but...you should be specifying the component as a component like so:

export default{
    components: {
        QueryDetailTemplate
    },
    data(){
        return{
        data: [...],
    }
}

OR if you want to import it asynchronously:

import Vue from 'vue'

export default {
    methods: {
        import() {
             Vue.component(componentName, () => import(`./${componentName}.vue`));
        }
    }
}

And then you can render it in main:

<query-detail-template
    test='Hello World'>
</query-detail-template>

How to pass data to a component template

1 Answers