单文件组件(.vue)在指定位置处挂载,以及动态加载组件

---

title: 单文件组件(.vue)在指定位置处挂载,以及动态加载组件
tags: vue,挂载,SCF,动态加载组件
grammar_cjkRuby: true

SCF指定位置挂载(延迟挂载)

  当使用Vue的自定义组件,做类似于JQuery那种现在js新建节点,然后加到页面指定位置,发现无法像JQuery那样,直接使用下面这种就能加载到指定位置

    $("<div></div>").appendTo(xxx)

  SCF的处理办法是使用 Vue.extend() 将导入的子组件,转为Vue的类 VueComponent , 再使用 $mount() 方法去挂载

    import test from "./test";

    let mountTest=Vue.extend(test);//将导入组件转为类
    let tt=new mountTest().$mount("#test");//实例化组件类,挂载到 #test

这样是和下面这种常用的写法是一样的

    <div>
        <test></test>
    </dev>

  这是个比较完美无中生有的动态挂载子组件的方法,不用在components上声明,也不用在html预先写子组件的标签,但是还是得先import。
  这个可以单独写个引入js文件,负责引入一个文件夹下的所有js或vue文件,这样你只需要将SCF放到这个文件夹下就可以了。

动态加载组件

    let app=new Vue({
        ...,
        components:{
            child:() => import('../components/' + name + '.vue')
        }
    })

这样就可以根据name去动态加载组件,并根据指定挂载,就能避开在html中写 引入的组件的标签了