vue render 函数如何使用 import 的模板？

Question

代码

  this.$Modal.confirm({
    title: '标题',
    closable: false,
    render: (h) => {
    // 我想在这里，放  import('@/views/test.vue') 的文件
      return h('test', {
      }, 'ccc')
    }
  })

Answer 1

render 函数内不支持异步
异步组件只是在定义时定义异步 异步组件

定义组件时异步：

new Vue({
  components: {
    'my-component': () => getCom() // getCom 是一个promise
  },
  render(h){
    return h('my-component')
  }
})

将组件绑定到 data 上，任意时间动态加载：

new Vue({
  data(){
    return {
      com: null
    }
  },
  created(){
    getCom().then(c=>{
      this.com = c
    })
  },
  render(h){
    return h(this.com)
  }
})

至于你这种：

import('@/views/test.vue').then(com => { //可以缓存一下 不用每次都去异步加载
    this.$Modal.confirm({
        title: '标题',
        closable: false,
        render: (h) => h(com)
    })
})

Answer 2

return 里面把引号去掉
//import listRepair from './content/listRepair.vue'
render:(h,params)=>{

return h(listRepair,{
    props:{
        content:params.row
    }
})

},