如何将数据传递给组件模板

Question

目前我在一个 vue 组件中定义了几个组件模板。我已经将一些定义为字符串，但是如果它变得更复杂，它就会变得有些难以理解。因此，我让它返回一个单独的组件作为模板。但是我不确定如何将数据传递给组件。

这是我的 vue 组件中的一个组件模板的当前方法示例。它将模板作为字符串返回并呈现 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';
                                    }
                                }
                            }
                        })
                    }
                },

我想避免这种方法，而是调用一个单独的文件。

我将组件导入到我的 vue 文件中

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

在我的主 vue 文件中，我有这个函数 'QueryDetailTemplate'：

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

在我的 QueryDetailTemplate.vue 这是我的代码：

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

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

它呈现的是硬编码的“嘿”，但它没有得到“测试”道具。

感谢任何指针

Answer 1

我不太确定您想要实现什么，但是...您应该将组件指定为这样的组件：

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

或者如果你想异步导入：

import Vue from 'vue'

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

然后你可以在 main 中渲染它：

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