就目前三大前端主流數據驅動框架（vue,ng,react）而言，均具有創建自定義組件的api，但都是必須先做到事先寫好掛載點，這個掛載點可以是原有靜態元素標簽也可以是自定義模板；對于多種組件通過同一數據流生成的，如果事先在頁面上寫好掛載點(mounted)，然后通過dom操作去動態添加，會遇到類似這樣一條錯誤提示信息：Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(…)。這又是為何呢，下一步該怎么辦？
原因是任何dom操作的對象必須是符合W3C標準的元素，除非如下所述的，改寫生成html元素對象的原型（HTMLElement.prototype）并注冊自定義元素，從而實現動態生成自定義組件的效果。
不過，大家都明白使用數據驅動框架的初衷就是盡可能避免dom操作，而如下代碼中還是有一些dom操作的，就目前認知水平而言，感覺這些必要的dom操作還是避免不了的。其它不多說了，直接看代碼。。。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="Content-type" content="text/html,charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="css/mui.min.css" rel="stylesheet"> <link href="css/app.css" rel="stylesheet"> <script src="js/vue.js" type="text/javascript"></script></head><body><div id="main" class="mui-content"></div></body><script src="js/fuhao-components.js" type="text/javascript"></script><script> var jsonData = [ { "keyname": "姓名鄂然失色而熱重重中之重重中之重雜志的熱熱", "type": "text", "key": "name11" }, { "value": "姓名鄂之重雜志的熱熱", "key": "name11" }, { "keyname": "姓名鄂然失色而熱熱熱熱是重中之重重中之重重中之重雜志的熱熱", }, { "keyname": "姓名鄂然失色而熱熱熱熱是重中之重重中之重重中之重雜志的熱熱", "type": "textarea", "key": "name" }, { "keyname": "性別", "type": "radio", "key": "sex", "values": [ { "key": "man", "value": "男輔導班" }, { "key": "women", "value": "女" } ] }, { "keyname": "復選", "type": "checkbox", "key": "checkbox", "values": [ { "key": "man", "value": "男" }, { "key": "women", "value": "女" } ] }, { "keyname": "類型", "type": "select", "key": "type1", "values": [ { "key": "type1", "value": "類型1" }, { "key": "type2", "value": "類型2" }, { "key": "type3", "value": "類型3" }, { "key": "type4", "value": "類型4" } ] }, { "keyname": "定位", "type": "gps", "key": "btn", "value": "地圖獲取定位" }, { "keyname": "拍照", "type": "photo", "key": "btn", "value": "拍照" } ]; (function () { AnalyJson(jsonData); })(); function AnalyJson(data) { if ('id' in data) { arguments.callee(data.values); } else { if ('name' in data) { htmlname = data.name; CreateInputViewer(data.name); arguments.callee(data.values); } else { if ('type' in data) { CreateInputViewer(data); } else { for (var p in data) { CreateInputViewer(data[p]); } } } } } function CreateInputViewer(data) { switch (data.type) { case 'text': { fh_C(data, 'c-input-text' + '-' + data.key, 'fhInputText', textTpl); break; } case 'textarea': { fh_C(data, 'c-textarea' + '-' + data.key, 'fhInputTextarea', textareaTpl); break; } case 'radio': { fh_C(data, 'c-input-radio' + '-' + data.key, 'fhInputTextarea', radioTpl); break; } case 'checkbox': { fh_C(data, 'c-input-checkbox' + '-' + data.key, 'fhInputCheckbox', checkboxTpl); break; } case 'select': { fh_C(data, 'c-select' + '-' + data.key, 'fhSelect', selectTpl); break; } case 'photo': { fh_C(data, 'c-photo' + '-' + data.key, 'fhPhoto', photoTpl); break; } case 'gps': { fh_C(data, 'c-gps' + '-' + data.key, 'fhGPS', gpsTpl); break; } default: { fh_C(data, 'c-default' + '-' + data.key, 'fhInputDefault', defaultTpl); break; } } } function fh_C(d, c, cn, tpl) { console.log(d); Vue.component(c, { template: tpl,// props:['key','keyname','values','value'], data: function () { return d } }); new Vue({ el: '.mui-content', components: { cn: cn }, }); var MyElementProto = Object.create(HTMLElement.prototype); MyElementProto.createdCallback = function () { this.innerHTML = tpl }; var MyComponent = document.registerElement(c, {prototype: MyElementProto}); document.querySelector('.mui-content').appendChild(new MyComponent()); }</script></html>為了保持代碼的可維護性及易讀性，我將模板部分單獨放在fuhao-components.js的文件里邊，如下所示：
var textTpl='';<div class="mui-content-padded"> <input :type="type" :name="key" :placeholder="keyname" ></div> var textareaTpl= '';<div class="mui-content-padded "> <textarea rows="5" :placeholder="keyname"> </textarea></div> var radioTpl= '';<form class="mui-input-group mui-content-padded"> <div class="mui-input-row mui-radio mui-left"v-for="value in values"> <label>{{value.key}}</label> <input :name="key" :type="type" :value="key"> </div></form>var checkboxTpl= '';<form class="mui-input-group mui-content-padded"> <div class="mui-input-row mui-checkbox mui-left"v-for="value in values"> <label>{{value.key}}</label> <input :name="key" :type="type" :value="key"> </div></form>var selectTpl= ''; <div class="mui-content-padded"> <h5 class="mui-content-padded" v-text="keyname"></h5> <select class="mui-btn mui-btn-block " :name="key"> <option value="key" v-text="value.key" v-for="value in values">{{value.key}}</option> </select> </div>var photoTpl= '';<div class="mui-content-padded"> <span v-text="keyname"></span> <button :name="key" onclick="takePhoto(this.name)" class="mui-btn mui-btn-primary">拍照</button> <img :id="key" height="70" width="100" class="img-rounded"></div> var gpsTpl='';<div class="mui-content col-xs-12"> <button class="mui-btn mui-btn-primary" :id="key" onclick="takeLocation(this.id)"> 獲取定位 </button></div> var defaultTpl= '';<div class="mui-content-padded " v-if="key"> <ul class="mui-table-view"> <li class="mui-table-view-cell mui-media"> <span class="fuhaoKey" v-text="key"></span> <span class="fuhaoValue" v-text="value"></span> </li> </ul ></div>最終渲染效果如下：
鑒于vue結合dom操作動態生成自定義組件，控制臺會報一定的錯誤這一點bug還在努力修復中，可能需要更加深入地了解vue數據綁定及傳遞機制與js動態注冊自定義組件的深入領會，繼續努力中。。。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
