Vue.extend与$mount的联系使用以及一类应用场景

最新推荐文章于 2024-07-09 10:37:13 发布
原创 最新推荐文章于 2024-07-09 10:37:13 发布 · 515 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

本文介绍如何使用Vue.extend与$mount将复杂HTML内容替换为Vue组件，提高代码可维护性。

使用场景

这里先说一种可能的应用场景，看看你是怎么解决的

比如在你的项目中，不得不使用一个api，其中他的一些函数一些属性接收的参数只能是一个html如下，而这时你恰巧需要丰富这个html的内容，而且内容很多且不同，css很丰富，甚至里面有大量的逻辑需要写可能还要调一些接口，想要这时最好用一个组件来代替他，而不是在这里写，在这里写是一种灾难，那么怎么办？

   XXXX.setHTML(`<p>行政区域： ${address}</p>`)

这里他只接收html，用组件放在这里是没有用的，那我们怎么才能把这里面的东西替换成一个组件呢？

使用Vue.extend与$mount

为了解决这个问题，我们引入了vue.extend与$mount，当然他们可能有更多的使用场景，目前我只遇到这个。
extend是用来创建一个组件构造器，他可以接收一个组件来当做他的一个参数，返回的是这个组件的一个构造器，
$mount是用来挂载元素的
有了这两个东西，我们能不能用extend来生成一个组件构造器，然后在使用的地方实例化一个组件，然后挂载到上面的元素上呢，这当然可以。

具体操作就是如下所示

import Vue from 'vue'

//我想要塞进去的一个组件，该组件负责展示一下点的详细信息
import detail from '@/views/Detail.vue' 
// 利用vue.extend 生成一个该组件的构造器
const detailItem = Vue.extend(detail) 
//这里必须有一个唯一ID
XXXX.setHTML(`<div id='datail'></div>`)
// new一个实例，将生成的组件挂载到上面的dom上，相当于用组件把上面那个dom替换了
new detailItem ().$mount('#detail')
Vue全局API之Vue.extend(extend构造器)
庚中
03-20 956
使用步骤: 1.在全局中使用Vue.extend()方法,里面参数是一个对象,写法跟组件类似; 2.把构造器挂载在dom元素上;(使用标签选择器挂载在dom元素上) <script> // 比如:我有一个需求:像a标签一样点击跳转,那我们就可以使用构造器来实现(实际开发多用在组件上) // 1.使用extend方法 let authorExten...
Vue extend的基本用法(实例详解)
10-15
主要介绍了Vue extend的基本用法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
深入浅析Vue中mixin和extend的区别和使用场景
12-10
Vue中有两个较为高级的静态方法mixin和extend，接下来我们来讨论下关于他们各自的原理和使用场景。 Mixin： 原理： 先来看看官网的介绍： 参数：{Object} mixin 用法： 混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。 // 为自定义的选项 'myOption' 注入一个处理器。 Vue.mixin({ created: function () { var myOption = this.$options.myOption if (my
vue extend $mount
qq_42451776的博客
08-19 438
文章目录案例jsvue 案例 js import Vue from "vue" const createMessage = (component, props) => { // 组件构造函数 const Ctor = Vue.extend(component) // 创建组件实例 const comp = new Ctor({ propsData: props }); // console.log(comp.$el); // undefined
vue2中，vue.extend使用场景
我的博客简介
09-20 1497
Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。在 vue 项目中，初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册，所以组件的创建不需要去关注，相比 extend 要更省心一点点。一般，我们会用 Vue.extend 接收一个组件对象来创建一个构造器，再利用创建的构造器 new 一个实例，并将这个实例挂载到一个元素上。
vue之浅谈extend与$mount
梦想成为全栈的切图仔
10-14 513
使用场景：在写vue时，不管是cdn的方法还是在webpack里用npm 引入vue，我们都会有一个根节点。并创建一个实例。 类似于 webpack 。也有一个入口文件。在main.js里，最后会创建一个实例。 因为webpack 基本都是前端路由的，它的html里一般都只有一个根节点其余都是通过JavaScript来进行完成的，也就是说许多的vue组件，每一个页面也是一个组件。比如，我们要使用一个组件 渲染时，这个自定义标签就会被替换为组件的内容，而且在哪写的自定义标签，就在哪里被替换。换句话说，
vue.extend的使用
YanHSama的博客
09-27 5991
vue.extend常使用场景 当需要在某一个场景内要使用一个新功能，该新功能只是在某组件上作一些新的逻辑新功能即可，选择用Vue.extend。 注意：需要在项目下新建文件vue.config.js module.exports = { runtimeCompiler: true } 否则会报错 You are using the runtime-only build of Vue where the template compiler is not available. Either
Vue独立组件开发：动态组件 Vue.extend及$mount
weixin_41952131的博客
04-18 737
在很多项目中我们需要使用动态组件，动态组件最大的区别是不能写死在模版中，而是在JS中调用，具有相当的灵活性。本文介绍了如何利用extend和mount方法创建动态组件，希望能帮到你。
vue之浅析extend与手动挂载$mount
奇舞周刊
10-27 1108
本文作者为奇舞团前端工程开发师vue 组件的实现方式有很多种，本文所说的是其中较少使用的一种，即由 vue 内置的 API extend 与 $mount 配合使用实现的。一、为什么使用1、典型使用场景的例子渲染组件前渲染组件后可以看到组件是在 body 标签添加进去的。关闭弹窗，组件会从 body 移除。2、普通组件的局限性2.1、普通组件的引用方式ButtonCounter.vue<t...
Vue之深入理解extend与手动挂载$mount
梦想成为全栈的切图仔
10-14 1353
这样既可以使用 .vue 来写复杂的组件（毕竟在 template 里堆字符串很痛苦），还可以根据需要传入适当的 props。上一章节我们说到，创建一个vue实例的时候，都会有一个选项el，来指定实例的根节点，如果不写el选项，那组件就处于未挂载状态。方法对组件进行了手动渲染，但它仅仅是被渲染好了，并没有挂载到节点上，也就显示不了组件。的作用，就是基于 Vue 构造器，创建一个“子类”，它的参数跟。，就可以让组件渲染，并且挂载到任意指定的节点上，比如 body。手动渲染的组件，如果要销毁，也要用。
Vue.extend挂载到实例上
charming的博客
11-05 4156
主要是做个笔记 根据官网的说法，Vue.extend：是使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 官网的用法是： &lt;div id="mount-point"&gt;&lt;/div&gt; // 创建构造器 var Profile = Vue.extend({ template: '&lt;p&gt;{{firstName}} {{lastName}...
Vue.js详细说明一下extend的使用+$mount
weixin_45275944的博客
06-20 1029
学习目标： 提示：这里可以添加学习目标 例如：一周掌握 Java 入门知识 学习内容： 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 1、 周一至周五晚上 7 点—晚上9点 2、 周六上午 9 点-上午 11 点 3、 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如： 1、 技术笔记 2 遍 2、优快云 技术博客
Vue原理解析(十一) 之 extend 和$mount 原理及示例
绿足 博客
09-29 1651
上一篇： Vue 原理解析（十）:之 事件API 原理及组件库的使用 之前在网上看到一个精美的确认弹框组件。 不过使用起来并不是很方便， 如果每个使用的地方需要引入该组件，需要注册， 需要给组件加ref 引用， 需要调用事件来控制状态。 其实这个组件相对来说比较独立的， 我们在使用组件库的时候， 相信都有调用过命令式弹框组件的经历， 今天我们来搞懂命令式组件的实现原理， 以及将这个精美的弹窗组...
vue extend 的基本使用
zpcqdkf的博客
08-13 2609
1.组件构造器（extend） vue.extend创建的是一个组件构造器，不是直接过载在vue的示例对象， 可以理解为构造了一个和vue组件内部有一样结构的对象，因此需要在vue上进行注册才能使用 最终还是要通过Vue.components注册才可以使用的。 代码示例 const Loading = Vue.extend({ template: ``, data () ...
vue extend的作用和使用方法
weixin_43777074的博客
07-09 553
Vue.extend 的原理是通过 Vue.extend 方法创建一个新的构造器，该构造器继承自 Vue，然后可以像普通组件一样使用。通过new 一个Vue.extend构造的组件实例，然后通过$mount()挂载到指定dom节点，这对于很多老项目中使用原生js去构建dom提供了便捷的方法，Vue.extend方法通过提供组件的复用、‌扩展、‌动态实现以及原型方法扩展等功能，‌能够更好地组织和管理代码，‌实现组件的灵活使用和功能定制。
利用 Vue.extend() 和 $mount 实现全局提示组件
Ardently_life的博客
05-13 561
首先先写一个，message组件 <template> <div> <span class='toast' v-show='isShow' :class='color'> {{message}} </span> </div> </template> <script> export default { data () { return {
Vue2 全局-Vue.extend构造器拓展
xuanwuziyou的专栏
09-03 2491
下面用 Vue.extend 方法构造一个全局的网页底部。 代码： 我是内容，一大片内容。谢谢你了。 var Footer=Vue.extend({ template:"联系人：{{ contact }} 版权所有：{{ company }}", data:function () { return{
如何使用 `Vue.extend` 动态创建组件？
最新发布
08-22
### 动态创建组件的方式 在 Vue 中，`Vue.extend` 是一种用于动态创建组件的机制，允许开发者在运行时基于现有组件或配置对象生成新的组件构造函数。通过 `Vue.extend` 创建的组件实例可以挂载到 DOM 中，实现按需渲染和动态加载的需求。此方法特别适用于需要通过逻辑判断动态创建和渲染组件的场景，例如弹窗组件、提示组件等[^2]。 ### 使用 `Vue.extend` 创建组件的步骤 1. **定义组件模板或组件对象** 可以是一个 `.vue` 文件导入的组件，也可以是直接通过 `template` 定义的字符串模板。 2. **调用 `Vue.extend` 方法** 传入组件配置对象，生成组件的构造函数。 3. **实例化组件并挂载到 DOM** 使用 `new` 关键字创建组件实例，并通过 `$mount` 方法将其挂载到指定的 DOM 节点。 ### 示例代码 以下是一个使用 `Vue.extend` 动态创建组件的完整示例： ```javascript // 定义一个简单的 Toast 组件 const Toast = { template: `<div class="toast">{{ message }}</div>`, props: ['message'] }; // 使用 Vue.extend 创建组件构造函数 const ToastConstructor = Vue.extend(Toast); // 创建组件实例并挂载 const toastInstance = new ToastConstructor({ propsData: { message: '这是一个提示信息' } }); // 挂载到 DOM toastInstance.$mount(); document.body.appendChild(toastInstance.$el); ``` 上述代码中，首先定义了一个简单的 `Toast` 组件，使用 `Vue.extend` 创建其构造函数，然后通过实例化构造函数并传入 `propsData` 来设置组件的属性值。最后调用 `$mount` 方法将组件挂载到页面上，并将其 DOM 节点添加到 `document.body` 中[^4]。 ### 插件化使用场景 `Vue.extend` 也可以用于开发插件，例如封装一个全局的 `$toast` 方法，使得在任意组件中都可以通过 `this.$toast` 调用并显示提示信息。以下是插件实现的示例： ```javascript // plugin.js import Toast from './toast.vue'; export default { install(Vue, options) { Vue.prototype.$toast = function (message) { const Constructor = Vue.extend(Toast); const instance = new Constructor(); instance.$slots.default = message; instance.$mount(); document.body.appendChild(instance.$el); }; } }; ``` 在 `main.js` 中引入并注册插件： ```javascript import Vue from 'vue'; import plugin from './plugin'; Vue.use(plugin); new Vue({ render: h => h(App) }).$mount('#app'); ``` 在组件中使用： ```javascript this.$toast('登录成功'); ``` 该插件通过 `Vue.extend` 动态创建组件实例，并将其挂载到页面上，实现了全局提示功能[^4]。 ### 注意事项 - `Vue.extend` 生成的组件构造函数继承自 Vue 的基础组件类，因此可以使用 `$props`、`$listeners`、生命周期钩子等特性。 - 在 Vue 3 中，`Vue.extend` 已被废弃，推荐使用 `defineComponent` 和组合式 API 实现类似功能。 ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值