Javascript 如何将数据传递到组件模板

目前，我正在单个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文件中，我有一个函数“QueryDetailTemplate”：

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

在my QueryDetailTemplate.vue中，这是我的代码：

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

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

Heyy{{test}}//未定义
导出默认值{
道具：[“测试”]，
创建（）{
console.log（this.test）；//显示未定义的
}
}

它呈现了硬编码的“Heyy”，但没有得到“test”属性

---

感谢您的指点

我不太确定您想要实现什么，但是…您应该将组件指定为如下所示的组件：

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

或者，如果要异步导入，请执行以下操作：

import Vue from 'vue'

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

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

---

我不太确定您想要实现什么，但是…您应该将组件指定为如下所示的组件：

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

或者，如果要异步导入，请执行以下操作：

import Vue from 'vue'

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

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

为什么

QueryDetailTemplate

是主组件的数据属性，您是如何呈现它的？@decademon我正在从基本的JS2 for Vue库中为数据网格组件实现一个详细信息行

QueryDetailTemplate

将是

detailTemplate

在本例中（单击源代码查看代码）在本例中，他们没有提到模板的实际设置方式或道具如何从主组件传递给子组件。为什么

QueryDetailTemplate

是主组件的数据属性，您是如何呈现它的？@DecadeMoon我正在从基本的JS2forVue库中为数据网格组件实现一个详细信息行

QueryDetailTemplate

将是

detailTemplate

在本例中（单击源代码查看代码），在本例中，他们没有提到模板的实际设置方式，也没有提到如何将道具从主组件传递给孩子。感谢您的评论，尽管我不确定您的回答是否有帮助（我的错，因为我的解释不好）.基本上我正在为我的应用程序实现一个数据网格组件。基本上是一个奇特的数据表。有一个功能，如果你点击一行，你可以向下展开一个细节行，如图所示：正如我在这里向另一位成员提到的，我不确定他们是如何创建返回的细节模板的，或者数据是如何从paren传递给它的t、 谢谢你的评论，虽然我不确定你的回答是否有用（我的错，因为我的解释不好）.基本上我正在为我的应用程序实现一个数据网格组件。基本上是一个奇特的数据表。有一个功能，如果你点击一行，你可以向下展开一个细节行，如图所示：正如我在这里向另一位成员提到的，我不确定他们是如何创建返回的细节模板的，或者数据是如何从paren传递给它的T