原文地址：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. echo 操作

    echo打印制表符到文件: MAP_PATH=/path/for i in `cat sp.list`; do echo -e "${MAP_PATH}/${i}.${i}/${i}.fin ...

  2. adaptsegnet 论文分析比较好的

    https://blog.csdn.net/weixin_43795588/article/details/118058775 常用的语义分割一般是由两部分组成:一部分是特征提取器,比如可以用Resn ...

  3. iOS设置textView的placeholder

    转载:http://blog.sina.com.cn/s/blog_7a1b23430102wkys.html #import "ViewController.h" @interf ...

  4. AX2012 使用HTML自定义popup内样式

    在Class Box下新增方法如下: public client static DialogButton yesNoHTML( str _text, DialogButton _defaultButt ...

  5. 10s后再次获取手机验证码

    一般手机验证码获取都会加个间隔时间 js代码如下: function getDxCode(btn){ var reg = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则 var mo ...

  6. C语言中的循环

    1我觉得循环就是程序一直重复的执行一些语句,直到当符合条件时停止.循环总体分为while循环,do while循环和for循环. 2while循环和do while循环的区别:while是先判定是否符 ...

  7. lambda表达式--箭头函数

    箭头函数(匿名函数):输入参数+->+函数结果(只有当函数需要执行多条语句时,才需要return关键字和花括号) 什么是Lambda? 我们知道,对于一个Java变量,我们可以赋给其一个&quo ...

  8. 关于QT编译程序找不到MSVCRT.DLL和其他动态链接库的解决办法

    先上图(一大堆无法解析的外部符号): 解决办法分两个步骤: 1.系统环境变量设置,把这些dll文件所在目录加入到PATH中.比如C:\Windows\SysWOW64, C:\Windows\Syst ...

  9. 【Linux】虚拟机CentOS 7 磁盘扩容

    [Linux]虚拟机CentOS 7 磁盘扩容 在有些时候,自己或者公司开的虚拟机的磁盘在一开始的时候没规划好,或者有磁盘扩容的需求(其实在系统日常运维的时候这个需求时常出现),那么这个时候又该怎么处 ...

  10. SpringSecurity登录验证，多个用户表

    在开始之前我想感叹一句,技术久了不回头看看真的会忘记的,这次公司让我重新开发一个程序,项目架构为单体多模块开发,其中有个需求就是需要不同用户表进行登录,且不同表的用户名.手机号都可以重复. 这样的需求 ...