首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么动态挂载的vuejs内容不是根vue实例的子组件?

动态挂载的Vue.js内容不是根Vue实例的子组件是因为动态挂载的内容是通过Vue的$mount方法手动挂载到指定的DOM元素上,而不是在Vue组件的模板中声明的。Vue的根实例是通过new Vue()创建的,它会自动将根组件挂载到指定的DOM元素上,而根组件的子组件是在根组件的模板中声明的。

动态挂载是一种将Vue实例挂载到指定DOM元素的方式,它可以用于在运行时动态创建和挂载组件。通过$mount方法,我们可以手动将一个Vue实例挂载到指定的DOM元素上,而这个DOM元素可以是任意的,不一定是根元素。

由于动态挂载的内容是手动挂载的,它并不在根Vue实例的组件树中,因此不被认为是根Vue实例的子组件。它是一个独立的Vue实例,具有自己的生命周期和状态管理。

动态挂载的Vue实例可以用于实现一些特殊的需求,例如在某个特定的DOM元素上渲染一个独立的组件,或者在某个条件满足时才创建和挂载组件等。在实际应用中,可以根据具体的需求选择是否使用动态挂载来实现灵活的组件渲染和管理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue组件开发-高级玩法

在文章《Vue组件开发三板斧:prop、event、slot》中聊了常用组件开发常用API和一些采坑心得,这里,再说说一些可能不太常用高级玩法,可参考https://cn.vuejs.org/v2/...方式二:$mount 还有两种方式可以创建组件: new Vue() Vue.extend() 用new Vue()创建一个 Vue 实例时,都会有一个选项 el,可以用来指定实例节点。...如果不写 el 选项,那组件就处于未挂载状态。看看最顶层App.vue是如何挂载节点上: import App from '....$mount('#app') 应用场景:最常见应该是自定义全局消息弹窗了。需要将组件挂载在body节点上,此时,就可以通过$mount指定挂载节点。...一般我们写 Vue.js 组件,模板都是写在 内,但它并不是最终呈现内容,在 Vue.js 编译阶段,会解析为 Virtual DOM。

2.3K30

vuejs组件以及父子组件间通信传值

被包含自定义标签元素称为组件,实例模板内容是父组件,可以对比以前写html时候,元素嵌套那种层级关系。...而通过全局注册(Vue.component(tagName, options))或者局部注册组件组件,在实例作用域范围内,父实例模块中以自定义元素 调用组件进行使用,要注意是确保在初始化实例之前...Vue实例 (new Vue) 模板中 局部定义: 在实例外自定义组件名称,并且在实例中通过components方式进行注册,全局注册组件官方是不推荐使用,在后续利用vue-cli搭建单文件组件里...,它是保存在父组件list数组中,是直接挂载实例,通过按钮添加操作,将每次新添加值渲染到指定页面位置当中去 父组件数据是无法直接组件中使用,所以在父组件引用组件中,通过v-bind...@deletelist="deleteItemFun",在父组件这个模板当中,创建组件同时也监听了组件deletelist这个事件,一旦删除事件deleteitemFun被触发时候就会执行父组件实例挂载

20.4K10

Vuejs开发过程中一些常见问题解决方法

5.绑定value到Vue实例一个动态属性上 对于单选按钮,勾选框及选择框选项,v-model绑定value通常是静态字符串(对于勾选框是逻辑值): <!...模板节点有一个流程控制指令,如 v-if 或 v-for。 这些情况让实例有未知数量顶级元素,它将把它 DOM 内容当作片断。片断实例仍然会正确地渲染内容。...7.路由嵌套 路由嵌套会将其他组件渲染到该组件内,而不是进行整个页面跳转router-view本身就是将组件渲染到该位置,想要进行页面跳转,就要将页面渲染到组件,在起始配置路由时候写到: var App...= Vue.extend({ root }); router.start(App,'#app'); 这里首先将组件注册进来,用于将路由中配置好各个页面渲染出来,然后将组件挂载到与#app匹配元素上...` 不是响应 不过,有办法在实例创建之后添加属性并且让它是响应

6.5K30

vue@2.6.11 源码分析」组件渲染之虚拟DOM上界面

则需要触发组件remove相关钩子并且递归删除组件实际内容(实际上就是组件实际渲染内容节点,`vm....为什么需要克隆vnode❓❓❓ 2. 关键:尝试创建组件实例并渲染组件,createComponent返回true,说明当前vnode关联是一个组件,否则进入后面逻辑。 3....首先会调用vnode.data.hook.init,不考虑keepAlive场景下,这里调用`createComponentInstanceForVnode`创建组件实例,而后调用`$mount`进行组件渲染...oldVnode会创建一个游离组件组件等待挂载 ,还没有想到这种场景,记个TODO ❎ 2. isPatchable递归向下查找节点不是组件标签vnode,返回该vnode.tag...demo,并记录执行状态,来更新第五节和本节内容,并给出更多图示,比如父子组件实例,vnode相互引用关系。

92850

Vue2向Vue3过渡,持续记录

bindings) 将会“回退”且作为普通 HTML attribute 应用在组件元素上。...//挂载生命周期 8.传递props不是响应式 传递props不建议去修改,基础类型和对象引用修改时都会报错,传递props值是一个对象时,属性值是可以修改。...(这会运用在  直接节点及其所有子孙节点)。配合动态组件时,组件实例能够被在它们第一次被创建时候缓存下来。...(这会运用在直接节点及其所有子孙节点。) 24.测试加载顺序。 从main.js开始,依次开始初始化状态管理器、路由对象,然后挂载Vue对象。...父组件组件定义应该是所有组件,共享数据层次感。。。! 28.v-for循环动态生成表单时候,绑定循环临时变量会保持响应式吗?

5.7K40

vue组件组件动态传值两种方法

在一些项目需求中需要父组件组件动态传值,比如我这里需求是,父组件动态通过axios获取返回图片url数组然后传给组件,上传图片组件拿到该数组后进行遍历并展示图片,因为有时候获取到会是空,...this.productImage,然后把该数组传给组件定义props属性src-list 组件: watch:{ srcList(curVal,oldVal){ if(curVal...){ this.uploadImg=curVal; } }, } 然后组件成功动态获取到该数组 方法二: 通过ref属性,父组件调用组件方法,把要传数组作为参数传给组件...,如果是动态改变,也要记得加watch函数,动态改变之后执行操作写在watch里,比如 this....$emit 函数! 见组件向父组件传值

3.9K100

17 vue 组件化基础

目录 注册组件并使用 模板只有一个元素 监听子组件事件 具名插槽 动态组件 注册组件并使用 组件化是vue除了声明式渲染之外另一个最重要概念之一。 组件,本质上是一个拥有自定义选项vue实现。...模板只有一个元素 每个组件必须只有一个元素。 为什么? 这是为了省略el设置,让开发变得简单简洁。...初始化第一个vue实例代码往往是这样: let vm = new Vue({ el:'#app' ... }) el指定#app是html domid: 每个vue组件都是一个参数不同vue实例,那么为什么单页面组件或自定义组件不需要指定el呢?...通过$event,可以实现在组件事件中向父组件传递参数数据。 具名插槽 有时候需要在父组件中指定子组件内容,应当怎么处理呢?例如,组件是一个弱出窗口,窗体内容只有父组件知道。

80620

Vue进阶】手把手教你在 Vue 中使用 JSX

灵活性,同时又兼具 html 语义化和直观性 为什么要在 Vue 中使用 JSX 有时候,我们使用渲染函数(render function)来抽象组件,渲染函数不是很清楚参见官方文档[1],...', { 'injectH': false }] ] } 基础内容 这里展示在 Vue 中书写一些基础内容,包括纯文本、动态内容、标签使用、自定义组件使用...,这些跟我们平时使用单文件组件类似,如下所示: 注意:JSX顶层只能有一个元素 render() { return ( 内容 {/*...父组件在书写组件标签时候,通过 scopedSlots 值指定插入位置是 test,并在回调函数获取到组件传入 user 值 注意:作用域插槽是写在组件标签中,类似属性。...函数式组件是一个无状态、无实例组件,详见官网说明[4],新建一个 FunctionalComponent.js 文件,内容如下: export default ({ props }) =>

4.5K20

认识vue-route

我们可以访问其官方网站对其进行学习: https://router.vuejs.org/zh/ vue-router是基于路由和组件 路由用于设定访问路径, 将路径和组件映射起来....,并且调用 Vue.use(VueRouter) 第二步:创建路由实例,并且传入路由映射配置 第三步:在Vue实例挂载创建路由实例 使用vue-router步骤: 第一步: 创建路由组件 第二步...from ‘vue-router’ Vue.use(VueRouter) 创建router实例 image.png 挂载Vue实例中 image.png 步骤一:创建路由组件 image.png 步骤二...: 该标签会根据当前路径, 动态渲染出不同组件. 网页其他内容, 比如顶部标题/导航, 或者底部一些版权信息等会和处于同一个等级....在路由切换时, 切换挂载组件, 其他内容不会发生改变.

63030

7 个简单 VueJS 小技巧,助力你成为更好开发者

1、在多条路线中使用一个组件 这是开发人员遇到一种非常常见情况,即多个路由解析到同一个 Vue 组件。 然而,问题在于 Vue 优化了你应用程序并重用现有组件不是创建新组件。... 现在,你应用将不会重用现有组件,并且会在你切换路由时更新你内容。...这样做一个问题是,对于较大组件,这些选项可能相隔数百行。 但是,查看 Vue 文档,我们看到有一个实例方法 $on 用于侦听实例事件。 此外,VueJS 生命周期钩子会在触发时发出自定义事件。... 7、你必须了解所有组件选项 如果你真的想成为一名 VueJS 开发专家,你需要了解所有不同组件选项、何时使用它们以及为什么使用它们...结论 这些绝不是 VueJS 技巧完整列表。这些只是我个人认为最有用一些技巧。其中一些技巧是我在 Vue 中开发了很长时间才发现,所以我想与大家分享这些知识。

2.1K20

新闻推荐实战 (六) : 前端基础及Vue实战

2.3 Vue 生命周期 每个 Vue 实例在被创建时都要经过一系列初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。...实例已完成对选项处理,以下内容已被配置完毕:数据侦听、计算属性、方法、事件/侦听器回调函数。然而,挂载阶段还没开始,且 $el 目前尚不可用。...但mounted 不会保证所有的组件也都被挂载完成。如果希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm....但updated 不会保证所有的组件也都被重新渲染完毕。如果希望等到整个视图都渲染完毕,可以在 updated 里使用 vm....rem 基本原理是根据屏幕不同分辨率,动态修改字体大小,让所有的用 rem 单位元素跟着屏幕尺寸一起缩放,从而达到自适应效果。

2.2K20

【手写Vuex】-手撕Vuex-添加全局$store

本篇文章主要是实现一个全局 $store,这个 $store 是挂载Vue 原型上,所以在任何一个组件当中都可以通过 this.$store 访问到。...打开浏览器控制台,运行结果如下: 可以看到在 beforeCreate 方法中打印了三次,Vue 实例时候会先实例组件,然后在实例组件时候会先实例化子组件,所以会打印三次。...方法打印属性值为 $options.name 即可: 返回浏览器控制台观察输出结果: 输出内容和我们结论是一致,知道了实例过程之后,接下来就是完善核心逻辑即可,我们知道在实例化过程中,首先实例组件...,然后在实例组件时候会先实例化子组件,所以我们可以在实例组件时候给组件添加一个 $store 属性,然后在实例化子组件时候直接从父组件中取出 $store 属性赋值给组件即可。...$options.store; } else { /* 如果不是组件, 那么默认没有store 我们只需要将它父组件$store赋值给它即可

36921

化身面试官出 30+ Vue 面试题,超级干货(附答案)

答案 官网介绍: cn.vuejs.org/index.html[2]关键点: 渐进式 JavaScript 框架、核心库加插件、动态创建用户界面(异步获取后台数据,数据展示在界面)特点: MVVM 模式...、 sort 、 reverse 这七种,只要这些方法执行改了数组内容,我就更新内容就好了,是不是很好理解。...无 $el . beforeMount:在挂载之前调用,相关 render 函数首次被调用 mounted:了被新创建vm.$el替换,并挂载实例上去之后调用改钩子。...v-html 会导致哪些问题(简单) 答案 XSS 攻击 v-html 会替换标签内部元素 描述组件渲染和更新过程 答案 渲染组件时,会通过 vue.extend() 方法构建组件构造函数,并进行实例化...最终手动调用 $mount() 进行挂载。更新组件时会进行 patchVnode 流程,核心就是 diff 算法。 组件 data 为什么是函数 答案 避免组件数据互相影响。

2.2K10

Vue-Router学习笔记,持续记录

类似于服务端路由,前端路由实现起来其实也很简单,就是匹配不同 url 路径,进行解析,然后动态渲染出区域 html 内容。但是这样存在一个问题,就是 url 每次变化时候,都会造成页面的刷新。...}) /*创建和挂载实例,通过 router 配置参数注入路由,让整个应用都有路由功能 */ const app = new Vue({ router })....(), routes: routes }) /* 创建并挂载实例 */ const app = createApp({}) /* 确保 _use_ 路由实例使,整个应用支持路由 */ app.use...路由懒加载、异步组件 Vue Router 支持开箱即用动态导入,懒加载:使用到时候才加载。...也就是假设A是路由a访问组件,A内有一个组件内有router-view组件,a路由下面还有子路由;访问a子路由时,会渲染到A组件router-view 14.如何让父组件不渲染?

9.2K40

【编程鹿】学Vue.js这一篇就够了「万字学会|通俗易懂」上篇

/body> 这里用 v-on 指令绑定点击事件,而不是普通 onclick ,然后直接操作num 普通onclick是无法直接操作num Vue 实例 创建Vue实例 每个 Vue...$el :Vue 实例使用 DOM 元素 vm.$root :当前 Vue 实例Vue实例过程中,会调用这些生命周期钩子,给我们提供了执行自定义逻辑机会。...当我们定义这个counter组件时,它data 并不是像这样直接提供一个对象: data: { count: 0 } 取而代之是,一个组件 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象独立拷贝...其key就是组件名称 其值就是组件对象属性 效果与刚才全局注册是类似的,不同是,这个counter组件只能在当前Vue实例中使用 组件通信 通常一个单页应用会以一棵嵌套组件形式来组织:...image-20201001195026231 页面首先分成了顶部导航、左侧内容区、右侧边栏三部分 左侧内容区又分为上下两个组件 右侧边栏中又包含了3个组件 各个组件之间以嵌套关系组合在一起,那么这个时候不可避免会有组件间通信需求

12.3K20
领券