原文地址：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. java8中CompletableFuture异步处理超时

    java8中CompletableFuture异步处理超时的方法 Java 8 的 CompletableFuture 并没有 timeout 机制,虽然可以在 get 的时候指定 timeout,但 ...

  2. Kubernetes 平台中的日志收集

    准备 关于容器日志 Docker 的日志分为两类,一类是 Docker 引擎日志:另一类是容器日志.引擎日志一般都交给了系统日志,不同的操作系统会放在不同的位置. 本文主要介绍容器日志,容器日志可以理 ...

  3. C语言||一作业03

    1.作业头 这个作业属于哪个课程 https://edu.cnblogs.com/campus/zswxy/SE2020-3/ 这个作业目标在哪 https://edu.cnblogs.com/cam ...

  4. 利用expect交互批量修改普通用户过期密码

    利用expect交互批量修改普通用户过期密码 因为公司接了一个密码托管的活,有10000多台机器,系统有 openSUSE,SUSE,Ubuntu,centos,Oracle-Linux, 而且什么版 ...

  5. 核函数（kernel function）

    在接触反演.算法等方面的知识后,经常听到"核"这个字,它不像对原始变量的线性变换,也不像类似于机器学习中激活函数那样的非线性变换,对原始数据进行变换,就可以将复杂的问题简单化.接下 ...

  6. vue 添加多条数据 添加日期

    效果图添加多条数据,日期是具体到天. 后端数据格式time:[ { s_time:' ' , e_time: ' ' }] <p v-for="(item,index) in form ...

  7. vue项目中 vscode 保存时自动格式化设置，保持单引号和去除多余分号、逗号

    1.settings.json中添加: "prettier.semi": false, // 取消自动加分号 "prettier.singleQuote": t ...

  8. EXCEL之VLOOKUP函数——查找、分组、排序

    1,VLOOKUP查找 新建excel,输入测试数据,F列打乱A顺序,查找他们各自对应的学号 选中目标单元格(此处是G2),点击插入函数: 选择VLOOKUP: 我们要查找F列在A列对应的学号,所以G ...

  9. 区分 PaaS、IaaS 、SaaS

  10. 【线性DP】乌龟棋

    #include<bits/stdc++.h> using namespace std; int a[400],b[5]; int dp[50][50][50][50]; int main ...