Vue通过脚本动态加载自定义组件

最新推荐文章于 2024-09-29 16:41:09 发布

hjh811

最新推荐文章于 2024-09-29 16:41:09 发布

阅读量1.1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/hjh811/article/details/119871443

版权

vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

很多时候需要脚本的方式动态加载自定义组件，代码列子如下

       const my-comoponent = () => import('../components/my-comoponent.vue') 
       var toolborVM = new Vue({
          template: '<my-comoponent:toolData="toolData"></my-comoponent>',
          components: {
            my-comoponent
          },
          data() {
            return {
              toolData: toolData
            }
          }
        })

        document.getElementById('custom').appendChild(toolborVM.$mount().$el)

1、首先通过const my-comoponent = () => import('../components/my-comoponent.vue')进行懒加载组件，如果组件比较多的话，最好使用懒加载，减少初始化加载的时间。

2、通过new Vue 新增Vue对象，实例化组件并绑定属性

3、Vue通过的$mount()手动挂载并获取$el的html内容

4、将$el挂载到dom上或者使用v-html也可以

这样的实现可以使得组件动态化和插件化