html – 使用没有src属性的vuejs在iframe中渲染组件

概述<iframe id="frame" width="100%" height="100%"></ifrme> 我想在这个iframe中渲染组件.有没有在iframe中创建html元素或渲染组件的选项？ new Vue({ el:'#frame', store:store, router:router, render: component}) 你可以参考下面的链接,这对

<iframe ID="frame" wIDth="100%" height="100%"></ifrme>

我想在这个iframe中渲染组件.有没有在iframe中创建HTML元素或渲染组件的选项？

new Vue({   el:'#frame',store:store,router:router,render: component})

解决方法 你可以参考下面的链接,这对我帮助很大.
这是链接和代码片段.

Vue.component('i-frame',{ render(h) { return  h('iframe',{ on: { load: this.renderChildren }})},beforeUpdate() {//freezing to prevent unnessessary Reactifiation of vNodesthis.iApp.children = Object.freeze(this.$slots.default)},methods: {renderChildren() {  const children = this.$slots.default  const body = this.$el.contentdocument.body        const el = document.createElement('div') // we will mount or nested app to this element  body.appendChild(el)  const iApp = new Vue({    name: 'iApp',//freezing to prevent unnessessary Reactifiation of vNodes    data: { children: Object.freeze(children) },render(h) {      return h('div',this.children)    },})  iApp.$mount(el) // mount into iframe  this.iApp = iApp // cache instance for later updates   }  }  })   Vue.component('test-child',{    template: `<div>    <h3>{{ Title }}</h3>     <p>     <slot/>     </p>    </div>`,props: ['Title'],methods: {     log:  _.debounce(function() {     console.log('resize!')     },200)     },mounted() {      this.$nextTick(() => {        const doc = this.$el.ownerdocument       const win = doc.defaultview       win.addEventListener('resize',this.log)     })     },beforeDestroy() {     const doc = this.$el.ownerdocument     const win = doc.defaultview     win.removeEventListener('resize',this.log)     }       })     new Vue({      el: '#app',data: {       dynamicPart: 'inputContent',show: false,}      })

https://jsfiddle.net/Linusborg/ohznser9/

总结

以上是内存溢出为你收集整理的html – 使用没有src属性的vuejs在iframe中渲染组件全部内容，希望文章能够帮你解决html – 使用没有src属性的vuejs在iframe中渲染组件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。