使用VueJS编译父组件的模板时如何将值绑定到子组件

Question

我有一个页面来显示来自1个html模板的服务器中的选项控件（标签，文本框），但是当我编译此html时，来自模型的数据未绑定到该html模板的组件。 但是，如果在我的页面上使用此html模板，则该模板具有约束力

我正在使用Vue.js和百里香叶，我在许多页面上进行搜索，但仍然找不到解决方法。

由于我是Vue.js的初学者，请帮助我解决此问题

谢谢。

 html template: this template is set to variable "inputHtmlText" on
model this problem is: option.get('2') isn't binding to component
 "cus-option-label" and "cus-option-input" when run command
 "this.template = Vue.compile(template).render;" from component
 "cusOptionTable"

<table> 
    <tr>
        <td><cus-option-label  th:option="${option.get('2')}"></cus-option-label></td>
        <td><cus-option-input  th:option="${option.get('2')}"></cus-optpion-input></td>
    </tr>   
</table>

代码html文件（我的页面）

<div class="area-general-wrap" id="optForm">
        <form ref="optForm" class="frm-set" th:object="${optForm}" method="post">
            <cus-option-table class="tbl-frm" role="presentation"
                            th:input-html-text="${inputHtmlText}">
            </cus-option-table>
        </form>
</div>

代码js文件

var cusOptpionLabel = Vue.extend({
    template: '<div class="txt-title"><label>{{ title }}<b v-else-if="required" class="label-required">required input</b></label></div>',
    props:{
        title:{
            type: String
        },
        required:{
            type: Boolean,
            default:false
        }
    }
});
var optText = '<div class="area-contents">{{ displayValue }}<input type="hidden" :name="name" :value="value"/></div>';
var optInputText = '<div class="area-contents"><input v-model="value" :name="name" type="text" :aria-label="title" :title="title" :data-vv-as="title"></div>';
var cusOptpionInput = Vue.extend({
    template: '',
    props:{
        name:{
            type: String,
            default:"opt"
        },
        referMode:{
            type: Boolean,
            default:false
        },
        inputType:{
            type: String,
        },
        title:{
            type: String
        },
        value:{},
        required:{
            type: Boolean,
            default:false
        }
    },
    data: function () {
        return {
            options:[],
            template: null
        }
    },
    render: function(createElement) {
        if (!this.template) {
            return createElement('div', 'Loading...');
        } else {
            return this.template();
        }
    },
    mounted:function(){
        var template = "";
        switch(this.inputType) {
            case "0":
                template = optText;
                break;
            case "1":
                template = optInputText;
                break;
            default:
                break;
        }
        setTimeout(function() {
            this.template = Vue.compile(template).render;
        }.bind(this), 0);
    }
});

var cusOptionTableDefaultTemplate = '<table></table>';
var cusOptionTable = Vue.extend({
    template: '',
    props:{
        inputHtmlText: {
            type: String
        }
        option: {
            type: Object
        }
    },
    data: function () {
        return {
            options:[],
            template: null
        }
    },
    methods: {
        changeTemplate: function() {
            var template = faOptionTableDefaultTemplate;
            if (this.inputLayoutHtmlText != null && this.inputLayoutHtmlText.trim() !== "") {
                template = this.inputLayoutHtmlText;
            }
            setTimeout(function() {
                this.template = Vue.compile(template).render;
            }.bind(this), 0);
        }
    },
    render: function(createElement) {
        if (!this.template) {
            return createElement('div', 'Loading...');
        } else {
            return this.template();
        }
    },
    mounted: function() {
        this.changeTemplate();
    },
    components: {
        "cus-option-label": cusOptpionLabel,
        "cus-option-input": cusOptpionInput
    }
});

optionForm = new Vue({
    el: "#optForm",
    data: function () {
        return {
            form:{},
            defaultModelData:{}
        }
    },  
    components: {
        "cus-option-table": cusOptionTable
    }
});

代码服务器：返回模型

    Map<String, OptionItem> OptionInfo = new HashMap<String, OptionItem>();
    OptionItem1.put("A1', optionItem1);
    OptionItem1.put("B1', optionItem2);
    OptionItem1.put("C1', optionItem3);
    model.addAttribute("option", OptionInfo);
    // inputHtmlText is html string
    model.addAttribute("inputHtmlText", inputHtmlText);

// the field of OptionItem are: name, title,inputType, required ,...