【Vue2】Vue.extend+$mount手动挂载操作_vue 手动挂载unmounted-优快云博客

本文链接：https://blog.youkuaiyun.com/zlting_/article/details/129755610

文章介绍了在特殊场景下如何使用Vue.extend结合$mount方法手动挂载组件到DOM中。通过示例展示了常规组件注册和使用方式，以及如何在不预先定义挂载点的情况下，动态创建并挂载组件，同时传递props数据和绑定事件处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

使用组件的常规写法

组件导入+注册+使用一条龙

<template>
    <div>
        <navVue :navList="navList" :openKey="openKey" :clickKey="clickKey" @getOpenKey="getOpenKey"
        @getClickKey="getClickKey" @getGrandson="getGrandson" @getGreatGrandson="getGreatGrandson"></navVue>
    </div>
</template>
<script>
import navVue from '@/components/nav/nav.vue';
export default {
    name: 'Home',
    components: {
        navVue
    }
}
</script>

手动挂载写法

在Vue构造函数时，可以配置el属性，如果配置el属性，可以使用$mount()进行挂载。组件实例化时可以传递vuex、store，也可以绑定props数据和事件。

<template>
    <div id="menu">
    </div>
</template>
<script>
import navVue from '@/components/nav/nav.vue';
export default {
    name: 'Home',
    data() {
        return {
          navList: [
              //列表
          ],
          openKey: '',
          clickKey: '',
        }
    },
    mounted() {
        this.createNavDom()
    },
    methods: {
        createNavDom() {
            const p = Vue.extend(navVue)
            let vm = new p({
                // el:'#menu',
                // store: this.$store,
                //路由
                router: this.$router,
                //props
                propsData: {
                    navList: this.navList,
                    openKey: this.openKey,
                    clickKey: this.clickKey,
                },
                //事件绑定
                listeners: {
                    getOpenKey: (res) => {
                        this.openKey = res
                    },
                    getClickKey: (res) => {
                        this.clickKey = res
                    }
                }
            })
            vm.$mount('#menu')
            console.log(vm)
        },
    }
}
</script>