javascript - Clone a vuejs component, retaining the props and other characteristics of the original component -
i have component this
<jesus> <bread flavour="fishes"></bread> </jesus>
i want take bread before compilation, multiply it, , put back.
this have done moment:
beforecompile () { // take away because don't want compiled yet this.breadel = this.$options._content.queryselector('bread') this.$options._content.removechild(this.breadel) }, compiled () { var jesusel = this.$el var breadstampel = this.breadel.outerhtml // return options prototype component // el duplicate html every time (maybe cache it?) var breadstampoptions = object.assign({}, {el () { let el = document.createelement('div') jesusel.appendchild(el) el.outerhtml = breadstampel el = jesusel.queryselector('bread') return el }}) var bread1 = new this.$options.components.bread(breadstampoptions) var bread2 = new this.$options.components.child(breadstampoptions) jesusel.queryselector('#bread1').appendchild(bread1.$el) jesusel.queryselector('#bread2').appendchild(bread2.$el) }
with jesus template having <div id="bread1">
<div id="bread2">
inside it.
is there better/native way clone component, including props?
attached jsfiddle: https://jsfiddle.net/mobbtqdv/10/
Comments
Post a Comment