原文地址：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. linux配置定时备份mysql数据库

    1.创建备份目录 # mkdir /mydata/bak2.创建备份脚本 # vi /usr/sbin/bakmysql.sh #!/bin/bash #Name:bakmysql.sh #This ...

  2. Java中String，JSON对象，java实体类(Bean)之间的相互转换

    FastJson对于json格式字符串的解析主要用到了一下三个类: (1)JSON:fastJson的解析器,用于JSON格式字符串与JSON对象及javaBean之间的转换. (2)JSONObje ...

  3. java 对象比较 返回不相同的值

    // // Source code recreated from a .class file by IntelliJ IDEA // (powered by FernFlower decompiler ...

  4. JS实现中英文混合文字友好截取功能

    众所周知,一个汉字等于两个英文字母的长度.那么,从汉字或者英文字母中截取相同长度文字则显示的长度则不一样.此时用户体验会不好.那么怎么解决呢?往下看 <script> /** * JS实现 ...

  5. 在NCBI中下载SRA数据

    目前,在NCBI中下载SRA数据主要有三种方式: 利用Aspera工具下载. 利用SRA Toolkit下载. 利用wget命令直接下载 第三种最为方便.其中的关键是得到下载数据的链接,即ftp的地址 ...

  6. Transformer_Detection-(DETR) 引入视觉领域的首创DETR (ECCV2020)

    End-to-End Object Detection with Transformers paper: https://link.zhihu.com/?target=https%3A//arxiv. ...

  7. 学习 vue框架

    new watch 监听值的变化     watch: {             "input1": {                 handler(newName, old ...

  8. 3DMAX2023卸载方法，如何完全彻底卸载删除清理干净3dmax各种残留注册表和文件？【转载】

    3dmax2023卸载重新安装方法,使用清理卸载工具箱完全彻底删除干净3dmax2023各种残留注册表和文件.3dmax2023显示已安装或者报错出现提示安装未完成某些产品无法安装的问题,怎么完全彻底 ...

  9. SpringMVC配置文件applicationContext.xml头信息

    applicationContext.xml头信息 <?xml version="1.0" encoding="UTF-8"?> <beans ...

  10. Redis5.0.4-集群(单机版)搭建

    最近尝试搭建了一下redis集群,这里记录一下,最后附上的是参考的博客地址. 安装C语言编译环境GCC yum install -y gcc-c++ 下载redis并编译安装 下载: wget htt ...