Vue中this和原型的联系

最新推荐文章于 2024-04-27 07:17:34 发布
最新推荐文章于 2024-04-27 07:17:34 发布
阅读量59 收藏
点赞数
文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49807130/article/details/134482631
版权

在Vue中，this指向组件实例，它是Vue实例的一个引用。this可以访问组件的数据、计算属性、方法等。

而Vue原型（prototype）是一个JavaScript对象，它包含了Vue实例的方法和属性。通过在组件中使用this，我们可以访问原型上的方法和属性。

Vue原型上的方法可以通过this来调用，例如：this.$nextTick()、this.$emit()等。这些方法是Vue提供的全局方法，可以在组件中直接使用。

总结来说，this是指向组件实例的引用，可以通过this来访问Vue原型上的方法和属性。Vue原型上的方法和属性可以在组件中通过this来调用和访问。

宇哥666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue2原型挂载sessionStorage、localStorage、element弹窗
03-04
在这个主题中，“Vue2原型挂载sessionStorage、localStorage、element弹窗”指的是在Vue2应用中扩展原型链，以便更方便地访问和操作浏览器的本地存储（localStorage）和会话存储（sessionStorage），同时结合Element...
vue封装可复用组件confirm,并绑定在vue原型上的示例
10-16
在Vue开发过程中，为了提高代码的可重用性和模块化，常常需要封装可复用的组件。本示例中，我们将探讨如何封装一个名为`confirm`的确认对话框组件，并将其绑定到Vue的原型上，以便在整个应用中方便地调用。 首先，...
【面试题】Vue2为什么能通过this访问到data、methods的属性或方法_为什么vue的this可以拿到原型上的属性
最新发布
2401_84446580的博客
04-27 1044
if (!) {warn(‘Vue是一个构造函数，应使用“new”关键字调用’);//Vue() //错误的调用方式 进入警告判断 此时this指向window 然后window的 window.__proto__的指向的Window构造函数的prototype//prototype上增加init方法//Vue实例//代码进行了删减//这里只是举例测试//initState方法代码进行了删减//这里是我们在创建实例的时候传的参数。
【面试题】Vue2为什么能通过this访问到data、methods的属性或方法
web全栈开发的博客
09-05 1202
其实看明白了Methods是怎么做到直接用this可以直接访问的后面的都是差不多的，主要就是一个构造函数，然后创建一个实例，在实例上增加属性或者方法，这样我们就可以用实例对象直接访问了。原理就是那么简单。
vue中封装函数全局都可以通过this调用。
weixin_48674314的博客
12-15 1623
第一步新建一个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中this的指向问题，this指不到Vue原型的解决方法
我的代码没有Bug的博客
12-25 1万+
在Vue中通常会用this去调用绑定在Vue原型上的方法。 解决方法 一 加粗样式 我在函数体内写了一个this.router.push(′/index′)方法，其主要目的是为了在验证完成后进行路由跳转，跳转到index页面。当运行过后会报个错。![在这里插入图片描述](https://img−blog.csdnimg.cn/201812251620106.png)其报错原因是因为在函数内部th...
vue 利用axios
Lyg_gis的博客
09-06 344
安装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' ...
深入浅析js原型链和vue构造函数
12-10
简单回顾下构造函数,原型和实例的关系:  每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针. 然鹅,在js对象里有这么...
在vue中使用回调函数,this调用无效的解决
10-14
在Vue组件中，当我们在一个函数内部（比如`updateStudentInfoToServer`）使用`this`调用其他方法或访问数据属性时，如果这个函数被作为回调传递给另一个函数（例如`updateStudentInfoToServer`的第二个和第三个参数...
Vue3如何像在prototype（原型）上挂载数据
qq_68155756的博客
08-08 3957
1. 首先，由于Vue团队对原型链的封装和改进，Vue3无法像Vue2一样直接在原型上放置数据， 2. 在Vue原型上挂载数据的作用是为了所有组件都可以通过 this. 获取到挂载的这个数据， 如果Vue3想要达到同样的效果，即（所有组件都可以通过this.myName获取到张三），需要用到vue3的mixin方法： 这样，在其他组件使用this.myName的时候就可以获取到'张三'，达到与在Vue.prototype上挂载数据同样的作用
Vue中在组件中单独使用this
青春木鱼的博客
12-20 1054
全局注册——Vue.prototype、Vue.component、Vue.ues；局部注册——components：{App，}
Vue的methods里面的this为什么会指向Vue实例?
天地会珠海分舵
10-25 1007
我们在些vue时经常通过this来获取data中的数据，我们知道data中的数据会通过defineProperty在组件或者vue实例对象中放一份，即数据代理。但是this为什么就指向了组件或者vue实例对象了呢？
Vue.use()和Vue.prototype详解
m0_51433562的博客
03-20 3269
Vue.use()和Vue.prototype详解
VUE兄弟组件之间传值，Vue.prototype.bus = new Vue()，this.bus.$on 的使用方法
夜阑珊妖妖
08-06 3490
举个例子： 组件一中有个分享按钮，点击分享按钮，展示组件二中的分享组件； 组件二分享组件有个取消按钮，点击关闭分享组件。 一、在main.js中添加一个bus实例： Vue.prototype.bus = new Vue() 二、分享按钮 加点击事件；把这个true值传给组件二； <a href="#" class="wap-zl-share" @click="sharecl...
Vue中 Vue.prototype 详解及使用
热门推荐
明天也要努力的博客
07-09 5万+
我们可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，可以通过在原型上定义它们使其在每个 Vue 的实例中可用。 1. 基本示例 在main.js中添加一个变量到 Vue.prototype Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了，甚至在实例被创建之前就可以 new Vue({ beforeCreate: function () { console.log(this.$appName)
vue.use和vue.prototype的区别
七侠剑客的博客
07-10 1万+
今天看自己项目代码，打开引入插件包的main.js，留意到引入包或者文件有两种方式： import Vue from 'vue' import echarts from 'echarts' import global from './global.js' //我自己创建的全局变量函数文件 Vue.prototype.$echarts=echarts; Vue.use(global) 于是...
初探vue.use和vue.prototype的区别
PC_136的博客
06-24 2032
首先，明确一点， 不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式 非vue官方库不支持new Vue()方式 每一个vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法。 可能网上说的比较概念化，其实主要是插件内源码编写的内容方式不一样，用Vue.use全局注册的插件，必须含有install方法，vue.use()通过...
vue3中如何使用原型链
08-30
在Vue 3中，使用原型链的方式与Vue 2有所不同。在Vue 3中，你可以使用`app.config.globalProperties`来添加全局属性或方法到Vue实例的原型链上。 具体使用方法如下： 1. 在`main.js`中创建Vue实例时，可以通过`app.config.globalProperties`来添加全局属性和方法。例如，如果你想在Vue实例上添加一个名为`$EventBus`的全局事件总线，可以这样写： ```javascript import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); app.config.globalProperties.$EventBus = new Vue(); app.mount('#app'); ``` 2. 然后，在任何Vue组件中，你都可以通过`this.$EventBus`来访问全局事件总线，并使用其提供的方法进行事件的触发和监听。例如，在一个组件中可以这样使用： ```javascript export default { mounted() { this.$EventBus.$emit('event-name', data); }, methods: { handleEvent(data) { // 处理事件 } }, created() { this.$EventBus.$on('event-name', this.handleEvent); } } ``` 通过以上方法，你可以在Vue 3中使用原型链来添加全局属性和方法，并实现组件间的通信。注意，Vue 3中的`createApp`函数代替了Vue 2中的`new Vue()`，其他部分的用法基本相同。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [Vue中关于JS原型链的应用](https://blog.csdn.net/qq_38802910/article/details/125884336)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Vue3、Vue2原型链挂载区别与实战举例](https://blog.csdn.net/qq_43547255/article/details/125925863)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值