单文件组件(.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中写 引入的组件的标签了