Vue.prototype挂载调用组件的方法

最新推荐文章于 2024-03-22 11:58:23 发布
最新推荐文章于 2024-03-22 11:58:23 发布
阅读量3k 收藏 3
点赞数
分类专栏： vue javascript 文章标签： vue web javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44243061/article/details/106195677
版权

需要使用Vue.extend方式，把引入的组件对象，变成VueComponent构造函数，然后就可以实例化这个函数，创建组件

  • 实例化组件el是必传字段

实例化的组件.$el可以获得组件最外层的元素，将元素挂载在指定的位置（示例中挂载的body中，如果要挂载指定的元素，元素可以通过参数的方式，传入到方法中）

如果在方法关闭的时候，没有删除该组件的根元素，再次调用方法，会重新创建组件并挂载，会造成多个无用组件的产生（实例中调用方法展示的是弹出框，在弹出框关闭，并且动画结束后，删除该组件）


import ExamineProcess from "../components/process/ExamineProcess";

export default Vue => {
   
    let ExamineProcessConstructor <
最低0.47元/天 解锁文章
前端_小学生
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue+Typescript中在Vue上挂载axios使用时报错问题
12-10
在vue项目开发过程中，为了方便在各个组件中调用axios，我们通常会在入口文件将axios挂载到vue原型身上，如下： main.ts import Vue from 'vue' import axios from './utils/http' Vue.prototype.$axios = axios; ...
Vue.prototype 详解及使用
sslcsq的博客
04-23 7246
Vue.prototype 详解及使用
VUE框架prototype原型对象添加属性和方法原理------VUE框架
春风若有怜花意，可否许我再少年
12-04 1205
VUE框架prototype原型对象添加属性和方法原理------VUE框架
vue在页面使用Vue.prototype全局变量
最新发布
肥晨开发的学习之路
03-22 1845
在 Vue 的模板中，你可以直接访问在 Vue 实例或组件的 data、computed 或 methods 中定义的属性或方法。虽然这不是一个推荐的做法，因为方法调用在模板中可能会导致不必要的性能开销，但你可以通过定义一个方法来返回 globalTcType 的值，并在模板中调用这个方法。避免命名冲突：通常，全局变量和方法的名字以 $ 开头，这是 Vue 的一个约定，以避免与组件的 data、props、computed 等属性产生冲突。你可以在模板中直接使用它，或者通过组件的方法间接使用它。
vue中封装函数全局都可以通过this调用。
weixin_48674314的博客
12-15 1611
第一步新建一个js文件。例如： export default { // Compares whether two arrays are equal arrayEqual (arr1, arr2) { if (arr1 === arr2) return true; if (arr1.length != arr2.length) return false; for (var i = 0; i < arr1.length; ++i) { if (arr1
通过Vue.use()使用插件、通过Vue.prototype实例、开发插件的主要方法
weixin_46037781的博客
07-05 286
插件的功能 添加全局方法或者 property。如：vue-custom-element 添加全局资源：指令/过滤器/过渡等。如 vue-touch 通过全局混入来添加一些组件选项。如 vue-router 添加 Vue 实例方法，通过把它们添加到 Vue.prototype上实现。 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router 插件的使用 通过全局方法 Vue.use()使用插件。 引入之后，调用use方法使用 // 用 Browserify 或 we
vue3项目如何在prototype原型上挂载方法并调用
bbt953的博客
04-02 5565
vue3 在main.js中挂载 // main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' const flag = function IsPC() { var userAgentInfo = navigator.userAgent var Agents = ['Android', 'iPhone',
如何在vue原型上挂载组件
m0_46355547的博客
04-14 523
需求:以往我们对Token过期的处理是:直接跳转到登录页面,最近看到一个新的需求就是,当Token过期之后,将弹出一个框,在框里面进行输入账号密码进行二次登录。
vue-cli3.x Vue.prototype挂载
wangmj518的专栏
04-04 585
使用vue-cli3.x 创建项目 之前vue-cli2创建项目后，如果自定义js插件，可以通过 import xxx from 'xxx' Vue.prototype.$xxx = xxx 将xxx挂载到Vue原型上，但到了cli3中，根据网上资料，现在 import Vue from 'vue' 并不能返回Vue对象，如果还是使用 Vue.prototype.$xxx = xxx挂载，那在子组件中也无法通过this.$xxx进行调用 cli3中现在是通过createApp创建Vue实例对.
vue 利用axios
Lyg_gis的博客
09-06 340
安装axios 1)：npm install 2)：npm install vue-axios --save 3)：npm install qs.js --save　　//它的作用是能把json格式的直接转成data所需的格式 在main 界面引用 import Vue from 'vue' import axios from 'axios' import qs from 'qs' ...
加载 vue 远程代码的组件实例详解
08-28
加载 Vue 远程代码的组件实例详解 本文将围绕 Vue 项目中加载远程代码的组件实例进行详细的讲解，涵盖了加载远端代码、注册加载后的代码到框架中、父组件如何和远端引入的组件通信、远端代码如何复用框架中已引入的...
深入解析Vue源码实例挂载与编译流程实现思路详解
10-17
实际的挂载工作由`Vue.prototype.$mount`方法完成，它会调用`mountComponent`。 5. `mountComponent`中，创建一个渲染watcher，用于在初始化和数据变化时执行更新操作。 6. 当数据变化时，`updateComponent`方法会被...
vue自定义全局共用函数详解
01-21
如果你需要让一个工具函数在每个组件可用，可以把方法挂载到 Vue.prototype上。 在main.js中： Vue.prototype.method = function () {} 组件中调用： this.method() 以上这篇vue自定义全局共用函数详解就是小编...
在vue中使用回调函数,this调用无效的解决
10-14
首先，让我们分析问题的核心：在Vue组件中，当我们在一个函数内部（比如`updateStudentInfoToServer`）使用`this`调用其他方法或访问数据属性时，如果这个函数被作为回调传递给另一个函数（例如`...
vue2.x利用Vue.prototype注册全局组件/方法
博哥的二进制世界
07-17 4586
vue2.x利用prototype注册全局方法/变量/组件 有些时候我们需要在vue项目的任意位置都能调用公共方法/变量，那么vue如何注册全局的方法/变量/组件呢？请看以下示例： 创建common.js（编写插件），插件内利用Vue.prototype全局挂载方法 import { Toast } from 'vant'; import echarts from 'echarts'; const install = (Vue) => { // toast提示,通过this.Toast调用
vue开发自定义的全局公共组件
WanFengZhou
08-20 4757
这里我主要介绍两种自定义全局公共组件的方法 （1）第一种： 首先在components中新建一个文件夹，我这里做的是全局加载动画组件所以命名的是Loading文件夹 如图： 其中index.js为组件加载文件，index.vue为组件模板文件 index.js文件： // 引入组件 import Loading from './index.vue' // 创建个空对象 const obj = {} // 设置安装方法 obj.install = (Vue) => { // 1. 创建组件构造
Vue3如何像在prototype（原型）上挂载数据
qq_68155756的博客
08-08 3640
1. 首先，由于Vue团队对原型链的封装和改进，Vue3无法像Vue2一样直接在原型上放置数据， 2. 在Vue原型上挂载数据的作用是为了所有组件都可以通过 this. 获取到挂载的这个数据， 如果Vue3想要达到同样的效果，即（所有组件都可以通过this.myName获取到张三），需要用到vue3的mixin方法： 这样，在其他组件使用this.myName的时候就可以获取到'张三'，达到与在Vue.prototype上挂载数据同样的作用
Vue.prototype详解
如果相遇，那么你好哦~
10-10 2121
在 Vue.js 中，经常会看到 this.$XXX 这种写法，那么这个是什么呢？其实这里就是使用 Vue.prototype 所定义的一个挂载到本身的全局方法，主要是为了防止全局变量的污染，所以我们来共同商议的一种写法。Vue.prototype 可以用来添加一些全局的属性或方法，使其在每个 Vue 实例中都可用。Vue.prototype 可以添加任何类型的属性或方法，比如：常量、对象、方法等。它是就是解决 替换全局使用的一个标识。
vue3中全局挂载Vue.prototype.handleTree = handleTree怎么写
06-10
在 Vue3 中，全局挂载需要使用 app.config.globalProperties，可以在 main.js 中进行如下操作： ```javascript import { createApp } from 'vue' ...然后在组件中可以直接使用 this.handleTree() 调用该方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值