Javascript 克隆vuejs组件，保留原始组件的道具和其他特征

我有一个这样的组件

<jesus>
    <bread flavour="fishes"></bread>
</jesus>

耶稣模板中包含

是否有更好的/本机方式来克隆组件，包括道具

附加了一个JSFIDLE：

---

很抱歉，但我不完全确定您想做什么……为什么需要克隆组件？你所有努力背后的实际想法是什么？我希望用户输入他的组件，我将操纵它们并填充表格。但我想带上用户输入的道具和所有其他东西，比如内容分发。我还是很迷茫。。。我希望用户输入其组件的含义是什么？用户如何输入组件？你提到的那张桌子在哪里？还有，你说的内容分发是什么意思？我指的是作为另一个组件的API。内容分发也不确定您要做什么。您不需要克隆组件。它们本身是可重用的。如果您想在组件之间共享数据，您需要定义一个数据对象并将其绑定到每个组件I抱歉，但我不完全确定您要做什么…为什么需要克隆组件？你所有努力背后的实际想法是什么？我希望用户输入他的组件，我将操纵它们并填充表格。但我想带上用户输入的道具和所有其他东西，比如内容分发。我还是很迷茫。。。我希望用户输入其组件的含义是什么？用户如何输入组件？你提到的那张桌子在哪里？还有，你说的内容分发是什么意思？我指的是作为另一个组件的API。内容分发也不确定您要做什么。您不需要克隆组件。它们本身是可重用的。如果要在组件之间共享数据，则需要定义数据对象并将其绑定到每个组件

beforeCompile () {
  // take it away because I don't want it to be 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
  // this will return the options for a prototype component
  // the el will duplicate the 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)
}