vue.prototype如何用?

vue.prototype如何用?下面给大家介绍一下vue.prototype。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

经常看到main.js,使用了import引入,还Vue.prototype.$..

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

那么Vue.prototype.$..是干嘛的?

对于一个vue脚手架项目来说,在main.js里使用Vue.prototype声明的变量,实际上是为Vue对象添加了一个原型属性,而不是一个全局变量。但是如果这个原型属性的值是引用类型的,我们就可以借此实现全局变量。

如果需要设置全局变量,在main.js中,Vue实例化的代码里添加。

不想污染全局作用域。这种情况下,你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。

Vue.prototype.$echarts = echarts

这样 $echarts 就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以。

“为什么 echarts 要以 $ 开头?”

$ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。

可以根据你的喜好使用自己的约定,比如 $_echarts 或 &echarts ,来避免和插件或未来的插件相冲突。

何来冲突?

main.js

1.png

使用它的vue页面打印结果

console.log(this.name); //My name is Yuki

但是: 如果这个页面也有name变量

2.png

3.png

给个钩子测试

4.png

5.png

先打印 “My name is Yuki”,然后打印 “我whowho”,因为 this.name在实例被创建之后被 data 覆写了。我们通过 $ 为实例属性设置作用域来避免这种事情发生。

加上$

Vue.prototype.$name = 'My name is Yuki';

6.png

7.png

更多web开发知识,请查阅 HTML中文网 !!

以上就是vue.prototype如何用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏