一看就懂的Vue之vue构造函数、vue实例、挂载

您所在的位置：网站首页 › 构造函数讲解 › 一看就懂的Vue之vue构造函数、vue实例、挂载

一看就懂的Vue之vue构造函数、vue实例、挂载

2023-08-25 23:45| 来源: 网络整理| 查看: 265

之前一直对vue构造函数、vue实例、挂载比较迷惑，今天就想着彻彻底底的搞懂这些知识点，下面我们就进入正题吧。

Vue构造函数

vue的构造函数有两种Vue、Vue.extend();

vue实例

vue实例是通过构造函数生成的，下面我们来通过一个具体的场景来讲解。

场景说明：有一个组件配置对象Notice.vue需要追加body里设计：有一个全局$create函数将Notice.vue变为真实dom追加到body上

Notice.vue

{{title}} {{message}} export default { props: { title: { type: String, default: '' }, message: { type: String, default: '' }, duration: { type: Number, default: 1000 } }, data() { return { isShow: false } }, methods: { show() { this.isShow = true; setTimeout(this.hide, this.duration) }, hide() { this.isShow = false; this.remove(); } }, }

举例1: create.js通过Vue构造函数render函数生成一个根组件实例，

import Vue from 'vue'; /** * 动态生成组件实例，并且挂载至body上 * @param {*} Component 是组件配置对象 * @param {*} props */ export default function create(Component, props) { // 借用Vue构造函数来动态生成组件实例 const vm = new Vue({ render(h) { return h(Component, {props}); } }); // 执行过$mount后根实例上会有$el // $mount === document.createElement vm.$mount(); // 通过$el属性获取真实的dom document.body.appendChild(vm.$el); // 根组件VueComponent为根实例Vue的$children const comp = vm.$children[0]; // 组件销毁 comp.remove = () => { document.body.removeChild(vm.$el); comp.$destroy() } return comp; }

举例2: create.js通过Vue.extend()构造函数创建一个子类构造函数

import Vue from 'vue'; export default function create(Component, props){ // 使用Vue.extend构造器创建一个子类构造函数 const Ctor = Vue.extend(Component); // new Ctor()直接生成VueComponent const comp = new Ctor({ propsData: props }); // 生成真实dom,只有执行过$mount才会有$el // $mount === document.createElement comp.$mount(); // 通过$el属性获取真实的dom document.body.appendChild(comp.$el); comp.remove = () => { // 组件销毁 document.body.removeChild(comp.$el); comp.$destroy() } return comp; }

最后create函数挂到Vue.prototype上生成全局的$create方法。

import create from 'create.js'; import Notice from 'Notice.vue' Vue.prototype.$create = create; this.$create(Notice, { title: '测试'， message: '我就是一个提示信息' }).show();

【本文地址】

一看就懂的Vue之vue构造函数、vue实例、挂载

一看就懂的Vue之vue构造函数、vue实例、挂载

今日新闻

推荐新闻