Vue2手动挂载组件$mount()学习

Amtai

已于 2023-02-08 20:35:59 修改

阅读量1k

点赞数

文章标签：前端 vue.js Powered by 金山文档

于 2023-02-08 20:30:17 首次发布

本文链接：https://blog.csdn.net/Amtai/article/details/128942927

版权

说实话，我自己在开发过程中，几乎没有使用过这个方法。是面试的时候，被问到的。所以特地学习，并记录分享一下。

官方介绍

首先我们先来看一下官方文档。

在官方文档中，定义了挂载方法 vm.$mount([elementOrSelector])

接受的参数为

{Element | string} [elementOrSelector]

{boolean} [hydrating]

用法

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 D

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Amtai

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2手动挂载组件$mount()学习

Vue2手动挂载组件$mount()学习
复制链接

扫一扫

vue 手动挂载html,【转】vue 手动挂载$mount() 获取 $el

weixin_42503660的博客

06-21

668

原文：https://www.cnblogs.com/CyLee/p/8425183.html手动挂载$mount()如果没有挂载的话，没有关联的 DOM 元素。是获取不到$el的。https://vuejs.org/v2/api/#vm-mountvar MyComponent = Vue.extend({template: 'Hello!'})// create and mount to #a...

Vue2源码梳理：关于vm.$mount的实现

Wang的专栏

02-15

1413

1 ) 在含有 compiler 版本中，先对 el 做一些处理2 ) 在没有定义 render 函数的时候，尝试获取一下 render 函数也就是说，把整个template通过一系列的逻辑判断，也是因为它支持很多很多种写法可以直接写 template也可以直接 template 是个dom对象如果不写 templete 的话，通过 el 的 outHTML 来获取这个 templete把这个template 通过这个编译的手段也转化成这个render函数。

参与评论您还未登录，请先登录后发表或查看评论

vue2中常用组件封装、全局挂载及使用

wch19960518的博客

06-25

375

vue2中常用组件封装、全局挂载及使用。

vue手动挂载$mount

weixin_41857258的博客

01-06

1001

使用vue-cli项目时封装了一个高德地图的js，并且使用了Vue.prototype属性，内部创建高德自定义窗体时content挂载了html语句，此时html语句中使用了onclick想调用js自定义方法时失效（方法必须为全局方法，所以无法调用js内部方法）解决方法：通过全局API：Vue.extend注册组件并实例化$mount(),挂载（.$el）在自定义窗体content上,在组件定义的方法中调用地图自定义方法，代码如下 Vue.prototype.gdMapFunction = {

Vue手动挂载组件$mount()，实现js插入组件，替换组件

sayoko06的博客

03-05

1万+

项目中有时候用到需要再页面中使用js插入一个vue组件，这时候就用到vue的手动挂载$mount，Vue官网$mount() 手动挂载限制：只在由new创建的实例中遵守。一、首先引入你要插入的组件和Vue import ShowBox from './show/ShowBox'; import Vue from "vue"; 二、手动挂载，js插入组件 //手动挂载，必须使用这...

vue2 框架运行原理剖析系列（二）之组件挂载$mount神秘之旅！！！

05-11

1025

vue 的抽象语法树与渲染函数生成、挂载方式、模板编译

vue之浅析extend与手动挂载$mount

奇舞周刊

10-27

998

本文作者为奇舞团前端工程开发师vue 组件的实现方式有很多种，本文所说的是其中较少使用的一种，即由 vue 内置的 API extend 与 $mount 配合使用实现的。一、为什么使用1、典型使用场景的例子渲染组件前渲染组件后可以看到组件是在 body 标签添加进去的。关闭弹窗，组件会从 body 移除。2、普通组件的局限性2.1、普通组件的引用方式ButtonCounter.vue<t...

vue vuex 挂载_Vue $mount()手动挂载

weixin_39726408的博客

01-12

421

//$mount()手动挂载//1当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；//假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。例如：newVue({router,render:h=>h(App)}).$mount("#app");//或者2newVue({el:'#app',router,render:h=>h(App...

Vue 实例挂载方法($mount)的实现

热门推荐

未思

03-30

1万+

在 Vue 的 _init 方法中已经回调了beforeCreate 和created这两个生命周期钩子，在此之后就进行了实例的挂载 if (vm.$options.el) { // 挂载实例 vm.$mount(vm.$options.el); } 在挂载函数中，将要进行 beforeMount 和 mounted 的回调。在不同的平台下对于 $mount 函数...

【Vue2】Vue.extend+$mount手动挂载操作

zlting_的博客

03-24

282

在某些特殊的环境中需要组件实例去挂载dom时，就会用到Vue.extend+$mount手动挂载操作。

vue中的.$mount(#app)手动挂载操作

01-21

在Vue构造函数时，需要配置一个el属性，如果没有没有el属性时，可以使用.$...补充知识：Vue手动挂载组件$mount()，实现js插入组件，替换组件项目中有时候用到需要再页面中使用js插入一个vue组件，这时候就用到vue的

vue中的.$mount('#app')手动挂载操作

10-14

手动挂载的一个常见场景是在运行时动态地创建和挂载Vue组件。比如，你可能在用户交互后，或者在某个条件满足时，才需要插入Vue组件。在这种情况下，可以使用`.extend()`来创建一个新的Vue构造器，然后用这个构造器...

深入理解Vue生命周期、手动挂载及挂载子组件

12-28

本文介绍了Vue生命周期和手动挂载，分享给大家，具体如下：1、vue的生命周期： 2、$mount()手动挂载当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；假如需要延迟挂载，可以在之后手动调用vm.$mount()方法...

ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间

yangshuquan的专栏

07-24

808

在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。

在Vue程序中，如何检测用户的登录状态并跳转到对应页面

最新发布

exlink2012的专栏

07-25

395

通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。

Windows10+vs 2017中创建WEB API教程

Explinks的博客

07-24

999

本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。

Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空

FangX_u的博客

07-24

591

采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。

TS如何处理js模块的类型？

闻人放歌的三寸青草园圃

07-24

279

【代码】TS如何处理js模块的类型？

vue中实现手动组件渲染

03-28

在Vue中，可以使用`$mount`方法手动渲染组件。具体步骤如下： 1. 创建一个组件实例 ```javascript import MyComponent from './MyComponent.vue' const vm = new Vue({ render: h => h(MyComponent), data: { // 组件需要的数据 } }) ``` 2. 手动挂载组件 ```javascript vm.$mount('#app') ``` 这里的`#app`是组件需要挂载到的DOM元素的选择器。如果不指定选择器，则可以将组件挂载到一个空的`div`元素中： ```javascript vm.$mount() document.body.appendChild(vm.$el) ``` 这样就可以手动渲染组件了。需要注意的是，手动渲染组件时，需要确保组件的依赖已经被解析并加载完成。如果组件依赖的其他组件还没有被加载，可能会导致组件渲染失败。