原文地址：https://blog.csdn.net/qq_39953537/article/details/110437554

vue3 中如何像 vue2 的 extend 一样挂载未挂载的组件，拿到标签本身（$el）

简介：最近在用 vue3 写个新项目，需要挂载自定义的组件，但是发现 vue3 中不再支持 extend 方法了，于是查看了 vant 最新的源码，发现里面有类似实现，特此提炼总结出来。

1.vue2 写法

 1 <!DOCTYPE html>

 2 <html lang="en">

 3   <head>

 4     <meta charset="UTF-8" />

 5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

 6     <title>Document</title>

 7     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

 8   </head>

 9

10   <body>

11     <div id="app"></div>

12   </body>

13

14   <script>

15     // 创建构造器

16     const DemoConstructor = Vue.extend({

17       render(h, props) {

18         return h('div', { style: { fontSize: '24px' } }, '你好' + this.name)

19       }

20     })

21     // 创建 DemoConstructor 实例

22     const instance = new DemoConstructor({ data: { name: '小米' } })

23     // 手动地挂载一个未挂载的实例。

24     instance.$mount()

25     console.log(instance.$el)

26   </script>

27 </html>

2、vue3

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <script src="https://unpkg.com/vue@3.0.2"></script>

  </head>

  <body></body>

  <script>

    const { createApp, h, ref } = Vue

    // vant  源码中是直接用的setup返回的jsx,我这里用的是vue的cdn用法,没有环境支持

    const app = createApp({

      setup(props) {

        const name = ref('小米')

        return { name }

      },

      render() {

        return h('div', { style: { fontSize: '24px' } }, '你好' + this.name)

      }

    })

    // 提供一个父元素

    const parent = document.createElement('div')

    //mount方法不再像vue2一样支持未挂载的实例，必须得挂载，即必须得给参数

    const instance = app.mount(parent)

    console.log(instance)

    console.log(instance.$el)

  </script>

</html>

3.(补充) 在应用之间共享配置

`

import { createApp as createBaseApp, Component } from 'vue'

import router from './router'

import store from './store'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

import { createI18n } from 'vue-i18n'

import Foo from './Foo.vue'

import Bar from './Bar.vue'

const messages = {

  en: {

    message: {

      message1: 'hello world -1',

      message2: 'hello world -2'

    }

  },

  zh: {

    message: {

      message1: '你好，世界 -1',

      message2: '你好，世界 -2'

    }

  }

}

const i18n = createI18n({

  locale: 'en',

  fallbackLocale: 'en',

  messages

})

export const createApp = (options: Component, rootProps?: Record<string, unknown> | null) => {

  const app = createBaseApp(options, rootProps)

  app.use(ElementPlus).use(i18n).use(router).use(store)

  return app

}

const app2 = createApp(Foo).mount('#foo')

const app3 = createApp(Bar).mount('#bar')

【转载】vue3 中如何像 vue2 的 extend 一样挂载未挂载的组件，拿到标签本身（$el）的更多相关文章

  1. Module Federation 模块联邦 在Vue3中使用Vue2搭建的微服务

    前言: 备注:本文基于对webpack Module Federation有一定了解的情况下 一般情况下使用模块联邦都是会使用相同的版本,如Vue2的组件时在Vue2中使用,但我为什么会在Vue3项目 ...

  2. vue3中defineComponent 的作用

    vue3中,新增了 defineComponent ,它并没有实现任何的逻辑,只是把接收的 Object 直接返回,它的存在是完全让传入的整个对象获得对应的类型,它的存在就是完全为了服务 TypeSc ...

  3. vue3中使用axios如何去请求数据

    在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...

  4. vue3中watch函数

    watch 监听普通类型 let count = ref(1); const changeCount = () => { count.value+=1 }; watch(count, (newV ...

  5. vue 3 学习笔记 (七)——vue3 中 computed 新用法

    vue3 中 的 computed 的使用,由于 vue3 兼容 vue2 的选项式API,所以可以直接使用 vue2的写法,这篇文章主要介绍 vue3 中 computed 的新用法,对比 vue2 ...

  6. 在vue3中使用router-link-active遇到的坑

    在使用 router-link-active 设置链接激活时CSS类名时,发现在例如 /member/order 和 /member/order/:id 这两个都包含 /member/order的路由 ...

  7. vue3中$attrs的变化与inheritAttrs的使用

    在vue3中的$attrs的变化 $listeners已被删除合并到$attrs中. $attrs现在包括class和style属性. 也就是说在vue3中$listeners不存在了.vue2中$l ...

  8. 转载SSIS中的容器和数据流—数据转换（Transformations）

    对数据流来说按照需求将数据转换成需要的格式是数据操作中的一个关键的步骤.例如想要得到聚合排序后的运算结果,转换可以实现这种操作.和SQL Server 2000 DTS完全不同,这些操作不需要编写sc ...

  9. 如何快速转载CSDN中的博客

    看到一篇<如何快速转载CSDN中的博客>,介绍通过检查元素→复制html来实现快速转载博客的方法.不过,不知道是我没有领会其精神还是其他原因,测试结果为失败.

  10. sass中的占位符%，@extend，@mixin（@include）的编译区别和使用场景

    对于下面同一段css,它们的编译效率是不同的. 1.使用@extend:基础类icon会出现在编译后的css文件中,即使它可能只是拿来被继承,而不是作为icon这个class单独使用 //基础类ico ...

随机推荐

  1. 天龙八部<三联版>二

    段誉来到无锡,遇上乔峰,斗气与乔峰比酒,乔峰误以为段誉是慕容复,段誉被乔峰豪气所折服,像乔峰坦言,乔峰不但不怒,反而对段誉很认可,二人结拜 段誉跟随乔峰来到丐帮,包不同和三女因为慕容复而和丐帮发生争执 ...

  2. Postgresql统计所有表的基本信息(如行数、大小等)

    目录 pg_class 记录表和几乎所有具有列或者像表的东西.这包括索引(但还要参见 pg_index ).序列.视图.物化视图.组合类型和TOAST表,参见 relkind .下面,当我们提及所有这 ...

  3. vue搭建项目iview+axios+less

    项目地址:https://github.com/CinderellaStory/vue-iview-project vue搭建项目壳子已安装:iview.axios.less 已有界面:登录.左侧菜单 ...

  4. c++ dll 传递string参数

    用c++编写了一个dll,需要传递一个路径的变量参数,刚开始想着使用string变量,但是在实践过程中string变量会成为乱码,尽量避免使用string变量传递参数,可以使用const char* ...

  5. Echart 属性解析

    <template> <div class="container"> <div id="myEchart" style=" ...

  6. LOJ数列分块入门九题（上）

    一转眼,已经有整整一年没有在博客园写博客了.去洛谷写了几篇(How time flys. 最近突然想起其实我不太擅长分块算法,又想起去年暑假有位同学同我提起过LOJ的数列分块九题,说来惭愧,打了这么久 ...

  7. WPF Toolbox 添加image

    //public  Toolbox()        //{  //          ItemsControl items = this as ItemsControl;  //          ...

  8. 【组会】2023_1_6 4d mmwave

    A NEW AUTOMOTIVE RADAR 4D POINT CLOUDS DETECTOR BY USING DEEP LEARNING ICASSP 2021 - 2021 IEEE Inter ...

  9. 5.3dmax轴相关

    # 知识点: 转换为可编辑的样条线(spline) chamfer 切角 Fillet 圆角 车削命令 书柜案例2 样条线(从图形到多边形) 1.在平面视图中选择矩形并创建一个矩形,将矩形转化为可编辑 ...

  10. APP 监听手机键盘是否弹出

    /** * 监听键盘是否弹出 * @param show * @param hide */ export const addEventKeyboardStatus = (show,hide)=> ...