原文地址：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. Mysql学习：3、sql数据类型及命令

    1.sql功能分类: 2.常见数据类型: 3.sql命令: DDL命令: a.创建数据库: create database testdatabase(数据库名称) character set utf8 ...

  2. setAttribute动态添加

    btnDel.setAttribute('type', 'button'); //type="button" btnDel.setAttribute('value', '删除'); ...

  3. 3MP/5MPNetwork-Camera摄像头默认口令

    网络资产搜索: shodan: 找到5MP-Network-Carema 登陆:admin/a***n End!!!

  4. vue后台管理系统——权限管理模块

    电商后台管理系统的功能--权限管理模块 1. 权限管理业务分析 通过权限管理模块控制不同的用户可以进行哪些操作,具体可以通过角色的方式进行控制,即每个用户分配一个特定的角色,角色包括不同的功能权限. ...

  5. 前端常用函数（find、includes、filter、Set、forEach、map、some、every、findIndex、splice、reduce）

    https://blog.csdn.net/qq_24280125/article/details/119275109 array.join(separator) .拼接返回字符串 参数 separa ...

  6. Communications link failure:The last packet successfully received from the server was 0 millisecond ago

    出现这种错误的大致情况如下: 1.数据库连接长时间未使用,断开连接后,再去连接出现这种情况.这种情况常见于用连接池连接数据库出现的问题 2.数据库连接的后缀参数问题 针对上述两种情况,解决方案如下 1 ...

  7. MySQL 面试题总结

    MySQL的面试知识点总结 Q1:MySQL 的逻辑架构了解吗? 第一层是服务器层,主要提供连接处理.授权认证.安全等功能. 第二层实现了 MySQL 核心服务功能,包括查询解析.分析.优化.缓存以及 ...

  8. 一种典型的不知循环次数的c语言循环问题

    问题如图 代码如下 1 #define _CRT_SECURE_NO_WARNINGS 1 2 #include<stdio.h> 3 int main() 4 { 5 puts(&quo ...

  9. snpEFF注释的vcf文件转化成maf文件

    利用一个perl语言写的工具:snpeffTomaf 一行代码即可实现非常方便 github地址链接:https://github.com/tsy19900929/snpeffToMaf 将此仓库中的 ...

  10. Alibaba Cloud Linux 3.2104 64位安装mysql5.6.45

    1 .安装cmake wget http://www.cmake.org/files/v2.8/cmake-2.8.10.2.tar.gz tar -zxvf cmake-2.8.10.2.tar.g ...