Vue之深入理解extend与手动挂载$mount

简介: Vue之深入理解extend与手动挂载$mount

上一章节我们说到,创建一个vue实例的时候,都会有一个选项el,来指定实例的根节点,如果不写el选项,那组件就处于未挂载状态。Vue.extend 的作用,就是基于 Vue 构造器,创建一个“子类”,它的参数跟 new Vue 的基本一样,但 data 要跟组件一样,是个函数,再配合 $mount ,就可以让组件渲染,并且挂载到任意指定的节点上,比如 body。

import Vue from 'vue';
const AlertComponent = Vue.extend({
  template: '<div>{{ message }}</div>',
  data () {
    return {
      message: 'Hello, Aresn'
    };
  },
});

这一步,我们创建了一个构造器,这个过程就可以解决异步获取 template 模板的问题,下面要手动渲染组件,并把它挂载到 body 下:


const component = new AlertComponent().$mount();


这一步,我们调用了 $mount 方法对组件进行了手动渲染,但它仅仅是被渲染好了,并没有挂载到节点上,也就显示不了组件。此时的 component 已经是一个标准的 Vue 组件实例,因此它的 $el 属性也可以被访问:


document.body.appendChild(component.$el);


当然,除了 body,你还可以挂载到其它节点上。

$mount 也有一些快捷的挂载方式,以下两种都是可以的:


// 在 $mount 里写参数来指定挂载的节点
new AlertComponent().$mount('#app');
// 不用 $mount,直接在创建实例时指定 el 选项
new AlertComponent({ el: '#app' });


实现同样的效果,除了用 extend 外,也可以直接创建 Vue 实例,并且用一个 Render 函数来渲染一个 .vue 文件:

import Vue from 'vue';
import Notification from './notification.vue';
const props = {};  // 这里可以传入一些组件的 props 选项
const Instance = new Vue({
  render (h) {
    return h(Notification, {
      props: props
    });
  }
});
const component = Instance.$mount();
document.body.appendChild(component.$el);

这样既可以使用 .vue 来写复杂的组件(毕竟在 template 里堆字符串很痛苦),还可以根据需要传入适当的 props。渲染后,如果想操作 Render 的 Notification 实例,也是很简单的:

const notification = Instance.$children[0];


因为 Instance 下只 Render 了 Notification 一个子组件,所以可以用 $children[0] 访问到。


需要注意的是,我们是用 $mount 手动渲染的组件,如果要销毁,也要用 $destroy 来手动销毁实例,必要时,也可以用 removeChild 把节点从 DOM 中移除。

目录
相关文章
|
1天前
|
JavaScript 前端开发
如何在Vue中实现路由懒加载?
如何在Vue中实现路由懒加载?
9 1
|
1天前
|
JavaScript UED
Vue中的路由懒加载有哪些优缺点?
Vue中的路由懒加载有哪些优缺点?
10 3
|
1天前
|
资源调度 JavaScript 网络架构
Vue中的路由是如何工作的?
Vue中的路由是如何工作的?
11 4
|
2天前
|
JavaScript
vue知识点
vue知识点
7 0
|
3天前
|
JavaScript
在Vue中,如何监听过渡效果的状态变化?
在Vue中,如何监听过渡效果的状态变化?
13 4
|
3天前
|
JavaScript
在Vue中,如何使用<transition>元素实现过渡效果?
在Vue中,如何使用<transition>元素实现过渡效果?
9 3
|
3天前
|
JavaScript
Vue中的过渡效果和动画有何不同?
Vue中的过渡效果和动画有何不同?
10 3
|
3天前
|
JavaScript
除了`v-bind`指令,还有哪些方法可以在Vue中绑定属性和数据?
除了`v-bind`指令,还有哪些方法可以在Vue中绑定属性和数据?
7 0
|
3天前
|
JavaScript
在Vue中,如何使用`v-bind`指令将属性绑定到DOM元素上?
在Vue中,如何使用`v-bind`指令将属性绑定到DOM元素上?
9 3
|
3天前
|
JavaScript
Vue中如何对DOM元素进行访问和操作?
Vue中如何对DOM元素进行访问和操作?
7 2

相关产品

  • 云迁移中心